Bagaimana untuk Menjajarkan Label Borang dan Input Secara Mendatar pada Baris yang Sama?

Mencapai Peletakan Mendatar Label Borang dan Input pada Baris Yang Sama

Dalam pembangunan web, estetika borang adalah penting untuk pengalaman pengguna. Menyusun label dan medan input pada baris yang sama boleh meningkatkan kebolehbacaan dan kebolehgunaan borang. Artikel ini meneroka cara menjajarkan elemen input dengan lancar dengan labelnya, tanpa mengira panjangnya.

Percubaan Awal

Pendekatan biasa untuk menjajarkan label dan input pada satu talian melibatkan penetapan lebar input kepada auto. Walau bagaimanapun, ini selalunya menghasilkan lebar input tetap. Sebagai alternatif, menggunakan lebar: 100%; mengalihkan input ke baris baharu, mencipta reka letak yang tidak diingini.

Penyelesaian: Menggunakan Elemen Span dengan Limpahan Tersembunyi

Penyelesaian ini melibatkan pembalut elemen input dalam rentang, memberikan ia cukup padding untuk mengekalkan kedudukannya di bawah label. Selepas itu, melaraskan label untuk terapung ke kiri mengalihkannya ke kiri rentang. Menetapkan limpahan span kepada tersembunyi memastikan kandungannya sesuai tanpa mengira panjangnya, sekali gus mewujudkan penjajaran yang diingini.

Peletakan Optimum Menggunakan paparan: sel jadual

Satu lagi pendekatan menggunakan paparan: sel jadual untuk meletakkan label dan input sebagai sel jadual. Ini memerlukan bekas untuk dipaparkan sebagai jadual dan menetapkan lebar label untuk mengekalkan kedudukannya sambil melaraskan padding input untuk mengoptimumkan jarak.

Panduan Pelaksanaan

Untuk yang pertama penyelesaian, gunakan kod HTML seperti ini:

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

Dan CSS:

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

Untuk penyelesaian kedua:

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

Dengan mengikuti penyelesaian ini, pembangun boleh mencapai penjajaran mendatar yang dikehendaki bagi elemen label dan input, meningkatkan reka bentuk borang dan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Label Borang dan Input Secara Mendatar pada Baris yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!