Bagaimana untuk Menjajarkan Label dan Medan Input Secara Mendatar dalam Borang Web?

Menjajarkan Label dan Elemen Input Secara Mendatar

Meningkatkan estetika borang web memerlukan keupayaan untuk meletakkan label dan medan input di samping satu sama lain. Panduan ini menggambarkan cara untuk mencapai penjajaran mendatar ini menggunakan CSS.

Isu:

Seperti yang diserlahkan dalam catatan awal, terdapat dua cabaran utama:

• Memastikan label dan elemen input menduduki baris yang sama.
• Meluaskan lebar medan input untuk mengisi ruang yang tinggal, tanpa mengira panjang label.

Penyelesaian 1: Inline-Block

Menggunakan paparan: inline-block untuk kedua-dua label dan elemen input membolehkan mereka menjajarkan secara mendatar sambil mengekalkan saiz individunya. Walau bagaimanapun, ini mungkin tidak memenuhi keperluan untuk mengisi baki lebar untuk medan input.

Penyelesaian yang Diperbaiki: Sihir terapung/limpahan

• Buat bekas untuk kedua-dua label dan elemen input.
• Apungkan label ke kiri untuk membenarkan input menduduki ruang yang tinggal.
• Sembunyikan limpahan pada bekas label untuk mengelakkan kelakuan dua baris.
• Tetapkan lebar: 100% untuk elemen input.

**CSS:

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

Penyelesaian 2: sel jadual

Satu lagi pendekatan yang berkesan ialah menganggap kedua-dua elemen sebagai sel jadual.

• Buat bekas pembalut dan tetapkan sifat paparannya kepada jadual.
• Tentukan label sebagai paparan: sel meja dengan lebar: 1px dan ruang putih: nowrap untuk mengelakkan limpahan.
• Tetapkan medan input sebagai paparan: sel jadual dan lebar: 100%.

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

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