CSS で動的幅を使用してラベルと入力を水平方向に整列させるにはどうすればよいですか?

ラベルと入力を動的幅で水平に配置する

Web デザインでは、多くの場合、ラベルとそれに対応する入力要素を同じ位置に配置する必要があります。ライン。ただし、ラベルのテキストに関係なく入力要素が残りの幅を確実に埋めるのは難しい場合があります。

CSS を使用してこれを実現するには、次の手法を検討してください:

オーバーフロー非表示手法

1. HTML: ラベルとスパン要素を使用して入力をラップします:

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

2. CSS: スパンで overflow: hidden プロパティを使用します:

<code class="css">label {
    float: left; /* Align label to the left */
}
span {
    display: block;
    overflow: hidden; /* Key trick for adjusting input width */
    padding: 0 4px 0 6px; /* Add padding for visual consistency */
}
input {
    width: 100%;
}</code>

テーブルセル表示テクニック

1. HTML: コンテナ div 内でラベルと入力を囲みます:

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

2. CSS: テーブル表示とテーブルセルのプロパティを利用します:

<code class="css">.container {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
    width: 1px; /* Minimal width to accommodate label */
    white-space: nowrap;
}
span {
    display: table-cell;
    padding: 0 0 0 5px;
}
input {
    width: 100%;
}</code>

これらの手法は、ラベル テキストの長さに合わせて入力要素が残りの幅を確実に埋めながら、ラベルと入力を効果的に水平に配置します。

以上がCSS で動的幅を使用してラベルと入力を水平方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。