Bagaimana untuk Menjajarkan Elemen Input dan Label pada Baris yang Sama dalam HTML?

Menjajarkan Elemen Input dengan Label pada Baris yang Sama

Dalam HTML, selalunya wajar untuk meletakkan label dan elemen input pada garis mendatar yang sama. Walau bagaimanapun, menentukan lebar ideal untuk elemen input untuk mengisi ruang yang tinggal boleh menjadi mencabar.

Isu:

Pendekatan standard, menggunakan lebar: auto;, hasil dalam lebar statik untuk elemen input. Sebagai alternatif, lebar: 100%; mengalihkan input ke baris baharu.

Penyelesaian:

Untuk mencapai penjajaran yang diingini, pertimbangkan teknik CSS berikut:

Pilihan 1: Terapung Label dan Limpahan

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>

Kaedah ini menggunakan limpahan: tersembunyi harta untuk menjajarkan elemen input dengan label dengan menghalang pemisah baris.

Pilihan 2: Paparan Jadual

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>

Pendekatan ini menggunakan paparan: sifat jadual untuk mencipta reka letak seperti jadual, dengan label mempunyai lebar tetap dan elemen input mengembang untuk mengisi ruang yang tinggal.

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