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

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

初期試行

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

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

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

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

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

実装ガイダンス

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

Label

CSS:

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

2 番目の解決策の場合:

HTML:

    Label
    

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

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