Web フォームでラベルと入力フィールドを水平方向に配置するにはどうすればよいですか?

ラベルと入力要素の水平方向の配置

Web フォームの美しさを高めるには、ラベルと入力フィールドを互いに並べて配置する機能が必要です。このガイドでは、CSS を使用してこの水平方向の配置を実現する方法を説明します。

問題:

最初の投稿で強調したように、2 つの主な課題があります:

• ラベルと入力要素が同じ行を占めるようにします。
• ラベルの長さに関係なく、入力フィールドの幅を拡張して残りのスペースを埋めます。

解決策 1: Inline-Block

label 要素と input 要素の両方に display: inline-block を使用すると、それぞれのサイズを維持しながら水平方向に整列することができます。ただし、これでは入力フィールドの残りの幅を埋めるという要件が満たされない可能性があります。

改善された解決策: float/overflow Magic

• コンテナを作成します。ラベルと入力要素の両方。
• 入力が残りのスペースを占めることができるように、ラベルを左にフローティングします。
• 二重行動作を防ぐために、ラベルのコンテナのオーバーフローを非表示にします。
• 入力要素の幅: 100% を設定します。

**CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

解決策 2: table-cell

もう 1 つの効果的なアプローチは、両方の要素をテーブル セルとして扱うことです。

• ラッパー コンテナを作成し、その表示プロパティを table に設定します。
• ラベルを表示として指定します: table-cellオーバーフローを防ぐため、幅: 1px、空白: nowrap を使用します。
• 入力フィールドを表示: table-cell、幅: 100% に設定します。

**CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

以上がWeb フォームでラベルと入力フィールドを水平方向に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。