Bagaimana untuk Menyelesaikan Ketakkonsistenan Inden Teks Label dalam Borang dengan Kekangan Ruang?

Membetulkan Isu Lekukan Teks Label dalam Borang Terkandas

Apabila bekerja dengan borang dalam senario lebar terhad, label dengan teks yang panjang boleh dibalut ke berbilang baris. Walau bagaimanapun, lekukan pada baris kedua mungkin tidak konsisten dengan lekukan pertama, menyebabkan penampilan tidak kemas.

Untuk menangani ketaksamaan visual ini, CSS boleh digunakan untuk mencapai lekukan seragam merentas semua baris.

Penyelesaian:

Coretan kod yang disediakan menawarkan penyelesaian yang menangani isu lekukan:

<code class="css">.checkbox-field {
    display: flex;
    flex-direction: row;
}

.checkbox-field label {
    margin-left: auto;
}</code>

<code class="html"><div class="checkbox-field">
    <input type="checkbox" id="check">
    <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div></code>

Penyelesaian ini menggunakan flex-direction: row property untuk menjajarkan elemen label di sebelah elemen input. Selain itu, sifat auto margin-kiri: melaraskan lekukan label secara automatik agar sepadan dengan input, tanpa mengira panjang teks.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ketakkonsistenan Inden Teks Label dalam Borang dengan Kekangan Ruang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!