Bagaimana untuk Menjajarkan Butang Radio dan Label pada Baris yang Sama dalam HTML?

Menempatkan Butang dan Label Radio pada Baris yang Sama

Dalam bentuk HTML, menjajarkan butang radio dan label yang berkaitan pada satu baris boleh mencabar. Untuk mencapai matlamat ini, beberapa teknik CSS boleh digunakan.

Struktur HTML yang dicadangkan meletakkan label dan elemen input:

<code class="html"><label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" /></code>

Untuk menjajarkannya secara mendatar, tambahkan peraturan CSS berikut:

<code class="css">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;
}</code>

Ini meletakkan label dan butang radio bersebelahan antara satu sama lain. Untuk memastikan berbilang butang radio dijajarkan pada baris yang sama, gunakan penanda berikut:

<code class="html"><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></code>

Dengan peraturan CSS yang sesuai, butang radio dan label akan dijajarkan pada baris yang sama.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Butang Radio dan Label pada Baris yang Sama dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!