入力要素とラベルを同じ行に揃えるにはどうすればよいですか?

入力要素とラベルを同じ行に配置する

Web デザインでは、ラベルとそれに対応する入力フィールドを同じ行に配置することが望ましいことがよくあります。同じ行で、入力フィールドがコンテナの残りの幅を埋めるように拡張されます。ただし、これは「width: 100%;」のような CSS プロパティとして問題を引き起こします。通常、入力が新しい行に折り返されます。

この問題を解決するには、次の 2 つのアプローチがあります。

アプローチ 1: 非表示のオーバーフローとフロート

このアプローチには、ラベルを左にフローティングし、入力を非表示のオーバーフローとそれをラップするスパンを持つように設定することが含まれます。ラベルの幅を考慮して、スパンの左側にはゼロ パディングがあり、右側には 6 ピクセルのパディングがあります。

<code class="html"><label for="test">Label</label>
<span><input name="test" id="test" type="text"></span></code>

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

アプローチ 2: テーブルセルを表示

もう 1 つのオプションは、「display: table-cell」プロパティを使用することです。コンテナーは「display: table」に設定されており、表のようなレイアウトが作成され、ラベルと入力は表のセル内に配置されます。ラベルには折り返されないように 1 ピクセルの幅が与えられ、入力にはスペースを確保するために 5 ピクセルの左パディングが設定されます。

<code class="html"><div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text"></span>
</div></code>

<code class="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%
}</code>

どちらの方法でも、クロスブラウザーで目的の位置合わせを効果的に実現できます。互換性。開発者は、特定のニーズとプロジェクト要件に最も適したアプローチを選択できます。

以上が入力要素とラベルを同じ行に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。