Bagaimanakah Saya Boleh Menjajarkan Butang dan Label Radio dalam Talian Tunggal?

Menjajarkan Label dan Butang Radio dalam Baris Tunggal

Apabila membina borang, mengekalkan reka letak yang kohesif untuk elemen borang adalah penting. Walau bagaimanapun, menjajarkan butang radio dan label yang sepadan sebelah menyebelah boleh menimbulkan cabaran. Di sini, kami menangani sebab masalah ini berlaku dan menyediakan penyelesaian untuk menyelesaikannya.

Dalam kod HTML yang disediakan, label dan butang radio tidak menjajarkan dengan betul kerana sifat paparan lalai untuk elemen ini ditetapkan kepada tahap sekatan , menyebabkan mereka bertindan secara menegak.

Untuk menyelesaikan isu ini, kita boleh memanfaatkan sifat terapung. Dengan menetapkan kedua-dua label dan butang radio untuk terapung ke kiri, kita boleh memaksanya untuk muncul bersebelahan:

fieldset {
  overflow: hidden;
}

.some-class {
  float: left;
  clear: none;
}

label {
  float: left;
  clear: none;
  display: block;
  padding: 0px 1em 0px 8px;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}

Selain itu, kita boleh menggunakan div bekas dengan kelas "some-class" untuk mengumpulkan butang radio dan label, seperti yang ditunjukkan dalam kod HTML berikut:

<fieldset>
  <div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
    <label for="z">Thing 2</label>
  </div>
</fieldset>

Dengan melaksanakan perubahan ini, label dan butang radio akan dijajarkan secara mendatar pada satu baris, menyelesaikan isu penjajaran.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Butang dan Label Radio dalam Talian Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!