Web フォームは、最新の Web サイトでよく使用されています。Web フォームには、チェックボックスと呼ばれる共通の要素があります。ただし、これらのチェックボックスとそのラベルを異なるブラウザで揃えるのは、困難な作業です。これは、ブラウザーやデバイスによって表示方法が異なる可能性があるためです。チェックボックスの表示に関しては、ブラウザーごとにスタイルやレンダリング方法が若干異なる場合があります。この問題を解決するために、チェックボックスを配置するさまざまな方法について説明します。クロスブラウザで CSS を使用したラベル。
チェック ボックスはさまざまなブラウザでどのように表示されますか?
Web フォームのチェックボックスの互換性はブラウザごとに異なります。 Internet Explorer では、チェックボックスの外観はバージョンによって異なります。古いバージョンでは最新の CSS 機能がサポートされていないため、チェックボックスとそのラベルを揃えるのが困難になります。 Mozilla Firefox および Safari のバージョンにも同じことが当てはまります。
したがって、表示の一貫性を確保し、チェックボックスとラベルを正しく配置するには、CSS でブラウザ間の互換性テクニックを使用する必要があります。
注 - Web フォームを作成するときは、通常、任意のタイプの入力要素で for 属性を使用することをお勧めします。これにより、チェックボックスとそのラベルが確実に揃えられます。 for 属性値が id 属性値と同じであることを常に確認してください。
さまざまなプラットフォームでチェックボックスとラベルを適切に配置するための CSS テクニックと実践方法がいくつかあります。これらのいくつかについては以下で説明します。
垂直方向の配置を使用してチェックボックスのスタイルを設定する
display 属性とvertical-align 属性を使用すると、チェックボックスとそのラベルを整列させることができます。
＃＃＃例＃＃＃
ここで、 "display: inline-block"
属性により、チェックボックスの表示タイプを inline-block に設定できます。 "vertical-align: middle" プロパティは、チェックボックスをコンテナの中央に垂直に配置します。
これら 2 つのプロパティを一緒に使用すると、チェックボックスが他の要素と同じ行に、行の中央に揃えて表示されます。したがって、チェックボックスとそのラベルは同じ行に配置され、ラベルのテキストはチェックボックスの中央に配置されたままになります。
リーリー
CSS フレックスボックスの使用
要素をフレキシブル コンテナとして使用して、チェック ボックスとラベルを揃えることができます。
＃＃＃例＃＃＃
この例では、
display: flex を使用して、label 要素をフレックス コンテナーとして使用します。 align-items: center この属性は、ラベルのテキストをチェックボックスの中央に配置します。
ただし、ラベル (コンテナー) サイズが変化してもチェックボックスの幅が変わらないように、input 要素で flex: none を使用しています。同時に、これら 3 つのプロパティを使用すると、チェックボックスとラベルを水平方向の中央に配置できます。
リーリー
vertical-align 属性を使用する
一部の最新のブラウザでは、チェックボックスはデフォルトでラベル テキストのベースラインに揃えられます。ただし、正しい配置を確保するために、label 要素と input 要素の両方で
vertical-align 属性を "top" に設定できます。
＃＃＃例＃＃＃
以下の例では、 "display: inline-block" 属性を使用してラベル (class="container") を表示し、要素をインライン ブロック要素として入力します。これにより、両方の要素がインラインになり、そのサイズが変更可能になります
“input[type="checkbox"]" は、入力要素のチェックボックスの種類を選択または一致させるために使用されるセレクターです。
さらに、 "vertical-align: top" 属性を使用して、要素をコンテナーの上部に垂直に配置しました。これらのプロパティを一緒に使用して、ラベル要素と入力要素が両方ともコンテナーの上部に垂直に配置され、相互にインラインで表示されるように設定します。
リーリー
位置および垂直揃えプロパティを使用する
input 要素の position 属性を
relative に保ち、 vertical-align:bottom 属性を使用してチェックボックスとラベルも揃えます。
＃＃＃例＃＃＃
ここでは、ラベルを ブロック レベルの要素 にして、コンテナの全幅を占めるようにします。 input 要素から padding と
margin を削除します。 vertical-align:bottom プロパティを使用して、チェックボックスをコンテナーの下部に垂直方向に揃えます。 position プロパティを使用して、チェックボックスをラベルに合わせます。
リーリー
＃＃＃結論は＃＃＃
Web フォームは、広く使用されている Web 開発の基本的なコンポーネントです。ブラウザ間互換性を持たせるには、入力要素とラベル要素の配置が適切であることを確認する必要があります。これにより、Web サイトがすべてのブラウザで一貫してプロフェッショナルに見えるようになります。およびデバイス。
以上がCSS を使用してさまざまなブラウザでチェックボックスとそのラベルを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
