Bagaimana untuk Menjajarkan Elemen Input dengan Label pada Baris yang Sama?

Menjajarkan Elemen Input dengan Label pada Baris Yang Sama

Dalam reka bentuk web, selalunya wajar meletakkan label dan medan input yang sepadan pada baris yang sama, dengan medan input mengembang untuk mengisi lebar baki bekasnya. Walau bagaimanapun, ini menimbulkan cabaran kerana sifat CSS seperti "lebar: 100%;" lazimnya menyebabkan input dibalut ke baris baharu.

Untuk mengatasi isu ini, terdapat dua pendekatan:

Pendekatan 1: Limpahan Tersembunyi dan Terapung

Pendekatan ini melibatkan mengapungkan label ke kiri dan menetapkan input untuk mempunyai limpahan tersembunyi dan rentang untuk membalutnya. Span mempunyai pelapik sifar di sebelah kiri dan 6px di sebelah kanan untuk mengambil kira lebar label.

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

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

Pendekatan 2: Paparkan Sel Jadual

Pilihan lain ialah menggunakan sifat "display: table-cell". Bekas ditetapkan kepada "display: table," yang mencipta reka letak seperti jadual, manakala label dan input diletakkan di dalam sel jadual. Label diberi lebar 1px untuk mengelakkan pembalut dan input ditetapkan untuk mempunyai padding kiri 5px untuk jarak.

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

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

Kedua-dua kaedah mencapai penjajaran yang diingini dengan penyemak imbas silang dengan berkesan keserasian. Pembangun boleh memilih pendekatan yang paling sesuai dengan keperluan khusus dan keperluan projek mereka.

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