Bagaimana untuk Inden Baris Label Terbungkus Seterusnya dalam CSS?

Mengenden Baris Seterusnya Teks Label Berbalut

Apabila berhadapan dengan kekangan pada lebar borang, teks label boleh membalut ke beberapa baris, yang membawa kepada estetik kebimbangan. Walaupun baris pertama diinden kerana kehadiran elemen input, baris berikutnya mungkin tidak, mewujudkan penampilan yang tidak sekata.

Untuk mencapai baris kedua dan seterusnya yang diinden hanya menggunakan CSS, pertimbangkan untuk menggunakan pendekatan berikut:

Sisipkan kedua-dua elemen input dan labelnya dalam bekas induk dengan kelas "medan kotak semak". Tetapkan sifat paparan induk ini kepada "flex" dan arah-flex kepada "row".

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

Contoh penggunaan:

<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 melaraskan teks label secara fleksibel kepada lebar yang tersedia sambil mengekalkan penampilan visual yang konsisten.

Atas ialah kandungan terperinci Bagaimana untuk Inden Baris Label Terbungkus Seterusnya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!