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

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

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

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

ブラウザによって解析方法が異なり、一部のブラウザにはデフォルトのマージンがあり、一部のブラウザにはデフォルトのパディングがあり、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 でクールなスライス画像カルーセル効果を実現

推薦する

Vue: メモリリークの詳細な説明

メモリリークとは何ですか?メモリ リークとは、新しいメモリが作成されたが、解放またはガベージ コレ...

MySQL EXPLAIN ステートメントの使用例

目次1. 使用方法2. 出力結果1.id 2.選択タイプ3.表4.パーティション5.タイプ6.可能な...

MySQL の全体的なアーキテクチャの紹介

MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...

MySQL で重複行を見つけて削除する方法

目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...

ランダムな文字を生成する Java サンプルコード

サンプルコード: java.util.Random をインポートします。 java.util.UUI...

MySQLスタートアップが起こした事故の実録

目次背景MySQLが完全に起動したかどうかを確認する方法事故最初の変更2回目の改訂要約するMySQL...

JavaScript DOM オブジェクト操作

目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...

Vue 父子価値移転、兄弟価値移転、子父価値移転の詳細な説明

目次1. 親コンポーネントが子コンポーネントに値を渡す1. 親コンポーネント.vue 2. サブコン...

MySQL GTID マスターとスレーブの不一致を修復するソリューション

目次解決策1: レプリカを再構築する前提条件アドバンテージ欠点手順マスター奴隷解決策2: データ修復...

Vue ドラッグ アンド ドロップのシンプルな実装

この記事では、主に次のような Vue ドラッグ アンド ドロップの簡単な実装を紹介します。レンダリン...

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

純粋な CSS3 で水平無限スクロールを実装するためのサンプル コード

この記事の例はすべて小さなプログラムで書かれていますが、実装される機能には影響しません。 wxmlル...

CSS トランジションを使用した円形ホバー効果のサンプルコード

この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...