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

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

HTML では、ラベルと入力要素を同じ水平線上に配置することが望ましいことがよくあります。ただし、残りのスペースを埋めるために入力要素の理想的な幅を決定するのは難しい場合があります。

問題:

width: auto; を使用する標準的なアプローチでは、次の結果が得られます。入力要素の静的な幅。あるいは、幅: 100%;入力を新しい行に移動します。

解決策:

希望の配置を実現するには、次の CSS テクニックを検討してください:

オプション 1: フローティングラベルとオーバーフロー

HTML:

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

CSS:

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

このメソッドはオーバーフローを利用します: hiddenプロパティを使用して、改行を防止して入力要素をラベルと位置合わせします。

オプション 2: テーブル表示

HTML:

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

CSS:

<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>

このアプローチでは、display: table プロパティを利用して表のようなレイアウトを作成します。ラベルの幅は固定で、input 要素は残りのスペースを埋めるように拡張されます。

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