Bagaimana untuk Menginden Teks Label Berbalut dalam CSS untuk Borang dengan Lebar Terhad?

CSS untuk Mengesot Teks Label Berbalut

Apabila mereka bentuk borang dengan lebar terhad, adalah perkara biasa untuk menemui label yang melebihi lebar borang, menyebabkan teks membalut. Walau bagaimanapun, masalah timbul apabila baris kedua teks yang dibalut tidak mempunyai lekukan yang betul berbanding baris pertama.

Untuk menangani perkara ini, CSS menawarkan penyelesaian yang mudah. Dengan menetapkan sifat paparan bekas label kepada "flex" dengan "flex-direction: row", kami menjajarkan label dan elemen input yang sepadan pada baris yang sama. Ini memastikan semua baris teks yang dibalut menerima lekukan yang sama.

Berikut ialah contoh:

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

Dengan menggunakan teknik CSS ini, anda boleh dengan mudah menguatkuasakan lekukan pada semua baris teks label yang dibalut, meningkatkan daya tarikan visual borang anda.

Atas ialah kandungan terperinci Bagaimana untuk Menginden Teks Label Berbalut dalam CSS untuk Borang dengan Lebar Terhad?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!