フォームのラベルと入力を同じ行に水平方向に揃えるにはどうすればよいですか?

フォームのラベルと入力を同じ行に水平方向に配置する

Web 開発では、フォームの美しさはユーザー エクスペリエンスにとって非常に重要です。ラベルと入力フィールドを同じ行に配置すると、フォームの読みやすさと使いやすさが向上します。この記事では、長さに関係なく、入力要素をそのラベルとシームレスに位置合わせする方法について説明します。

初期試行

ラベルと入力を 1 つの要素に位置合わせする一般的なアプローチこの行では、入力の幅を auto に設定する必要があります。ただし、これにより入力幅が固定されることがよくあります。あるいは、 width: 100%; を使用します。入力を改行に移動し、望ましくないレイアウトを作成します。

解決策: 非表示のオーバーフローを持つ Span 要素を使用する

この解決策では、入力要素をスパン内でラップし、次のようにします。ラベルの下の位置を維持するのに十分なパディングです。その後、ラベルを左フロートに調整すると、ラベルがスパンの左側に移動します。スパンのオーバーフローを非表示に設定すると、その長さに関係なくコンテンツが確実に収まり、目的の配置が作成されます。

表示を使用した最適な配置: table-cell

Anotherこのアプローチでは、display: table-cell を利用してラベルを配置し、表のセルとして入力します。これには、コンテナをテーブルとして表示する必要があり、入力パディングを調整して間隔を最適化しながら、その位置を維持するためにラベルの幅を確立する必要があります。

実装ガイダンス

最初の場合解決策としては、次のような HTML コードを使用します:

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

CSS:

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

2 番目の解決策の場合:

HTML:

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

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

これらのソリューションに従うことで、開発者はラベルと入力要素の希望する水平方向の配置を実現し、フォームのデザインとユーザー エクスペリエンスを向上させることができます。

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