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

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

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

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

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

推薦する

mysql8.0.14.zip のインストール中にデータ フォルダを自動的に作成できませんでした。サービスを開始できません。

今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...

Nginx 構成 PC サイトとモバイル サイトの分離によるリダイレクトの実現

PCサイトとモバイルサイトの分離設定にはnginxを使います。私のPCサイトとモバイルサイトは、SE...

CentOS6.5 でファイル共有サービス Samba を構築するチュートリアル

Samba サービス:このコンテンツはサンバサービス学習者の参考用ですケースの説明:企業の管理者は、...

MySQL マスタースレーブレプリケーションの実装手順

目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...

mysql bin-log ログファイルを sql ファイルに変換する方法

mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...

MySQLがOracleのnvlと同様の機能を持つことができるかどうかについての簡単な議論

isnullの代わりにifnullを使用するisnull は、null かどうかを判断するために使用...

Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...

LinuxのCPU負荷とCPU使用率の詳細な説明

CPU 負荷と CPU 使用率これらは両方とも、ある程度、マシンの忙しさを反映できます。 CPU 使...

nginx+WordPressで個人ブログを構築するプロセス全体の詳細な説明

0x00 はじめにWordPress は、世界で最も人気のある CMS システムです。PHP と M...

小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明

序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...

Vue3を使用してjsで呼び出せるコンポーネントを実装する

目次序文1. 従来のVueコンポーネント1. メインコンポーネントコード: 2. 使用方法3. 成果...

固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析

ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...

js シンプルで粗雑なパブリッシュとサブスクライブのサンプルコード

パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...

MySql インデックス使用戦略の分析

MySql インデックスインデックスの利点1. 一意のインデックスまたは主キー インデックスを作成す...