チェックボックスとラジオボタンの配置を実装する方法

チェックボックスとラジオボタンの配置を実装する方法

ブラウザによって動作が異なるだけでなく、フォントやテキスト サイズによっても動作が異なります。

フォームのチェックボックスとラジオボタンをリセット

ブラウザによって解析方法が異なり、一部のブラウザにはデフォルトのマージンがあり、一部のブラウザにはデフォルトのパディングがあり、IE6 と 7 ではマージンとパディングが 0 に設定されている場合でも、それらが占めるスペースは比較的大きいため、それらをリセットする必要があり、これにより多くの不要なトラブルを解決できます。

14px Arial フォントの解決策は次のとおりです。

1. CSSコード

.form { フォント: 14px/18px Arial、Helvetica、sans-serif; }
.form 入力、.form ラベル { 垂直位置揃え: 中央; }
.form ラベル { 右余白: 6px; }
.form_checkbox、.form_radio {
    margin: 0 3px 0 0;/*右側のテキスト間の間隔*/
    パディング: 0;
    幅: 13px;
    高さ: 13px;
    /*ie7 ie6は異なるフォントサイズに応じて異なる値を設定します*/
    *垂直方向の配置: 1px;
}

2. HTMLコード

<フォーム名="form1" メソッド="post" アクション="" クラス="form">
  <p>
    <input type="チェックボックス" name="チェックボックス4" id="チェックボックス4" class="form_checkbox">
    <label for="チェックボックス4">チェックボックス4</label>
    <input type="チェックボックス" name="チェックボックス5" id="チェックボックス5" class="form_checkbox">
    <label for="checkbox5">チェックボックス5</label>
    <input type="チェックボックス" name="チェックボックス6" id="チェックボックス6" class="form_checkbox">
    <label for="チェックボックス6">チェックボックス6</label>
  </p>
  <p>
    <input type="radio" name="radio" id="radio4" value="radio4" class="form_radio">
    <label for="radio4">ラジオ4</label>
    <input type="radio" name="radio" id="radio5" value="radio5" class="form_radio">
    <label for="radio5">ラジオ5</label>
    <input type="radio" name="radio" id="radio6" value="radio6" class="form_radio">
    <label for="radio6">ラジオ6</label>
  </p>
</フォーム>

3. レンダリング

以上がこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでも役立てば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

>>:  CSS3 でクールなスライス画像カルーセル効果を実現

推薦する

Mybatis での動的 SQL ステートメント分析

この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...

CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...

プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

select count() と select count(1) の違いと実行方法

Count(*) または Count(1) または Count([column]) は、おそらく S...

nginx で http でアクセスする Web サイトを https に変更する方法

目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....

MySQL innodb B+ツリーの高さを取得する方法

序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...

MySQL における in と exists の違いの詳細な説明

1. 事前に準備する便宜上、ここで 2 つのテーブルを作成し、そこにいくつかのデータを追加します。果...

Webデザインと制作のテスト問題と参考回答

<br />Web デザインと制作テスト パート I 多肢選択問題 1. 単一選択問題 ...

JavaScript 日付ツールの概要

ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...

IE6 で PNG-24 形式の画像を正常に表示させる 2 つの方法

方法1: </html>の後に次のコードを追加してください。コードをコピーコードは次のと...

Linux 占有ポートの強制解放と Linux ファイアウォールのポート開放方法の詳しい説明

nginx、mysql、tomcat などのサービスをインストールするときに、使用する必要があるポー...

MySQLデータベースのマスタースレーブレプリケーションの長い遅延に対する解決策

序文MySQL マスター スレーブ レプリケーションの遅延は、業界では長年の問題となっています。遅延...

ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...