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

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

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

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

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

推薦する

Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...

MySQL データベースの必須条件クエリ ステートメント

目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...

Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項

1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...

JS 手ぶれ補正機能の実装と使用シナリオ

目次1. 手ぶれ補正機能とは何ですか? 1. なぜ手ぶれ補正機能が必要なのでしょうか? 2. 手ぶれ...

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...

MySQL sql_modeの適切な設定に関する詳細な説明

MySQL sql_modeの適切な設定sql_mode は見落とされやすい変数です。デフォルト値は...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

CSSでスペースを処理する方法

1. 宇宙のルールHTML コード内の空白は通常、ブラウザによって無視されます。 <p>...

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

yum 経由で CentOS に PHP をインストールするチュートリアル

まず、yumを使ってCentOSにPHPをインストールする方法を紹介します。 1. PHPのyumソ...

Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項

/************************ * Linux メモリ管理 *********...

8 JSのreduce使用例とreduce操作方法

reduceメソッドは配列の反復メソッドです。 mapやfilterとは異なり、 reduceメソッ...

HTML 終了タグの問題と W3C 標準

W3C の原則によれば、XML の各開始タグには対応する終了タグが必要です。つまり、<html...