Bagaimana untuk Memaparkan Butang dan Label Radio pada Talian yang Sama?

Paparan Baris Sama Butang dan Label Radio

Apabila mencipta borang, butang radio dan label sepadannya diingini dipaparkan pada baris yang sama. Walau bagaimanapun, secara lalai, butang radio dipaparkan di bawah labelnya.

Isu berikut ditemui semasa cuba menjajarkan butang radio dan label:

<form>
    <label>First Item</label>
    <input type="radio">
    
    <label>Second Item</label>
    <input type="radio">
    
    <input type="submit">
</form>

Dalam kes ini, radio dipaparkan di bawah label-label tersebut. Untuk menangani perkara ini, penyelesaian berikut telah dilaksanakan:

Apungkan kedua-dua label dan elemen input ke kiri dan laraskan pelapik dan jidar sehingga penjajaran dicapai.

Selain itu, untuk keserasian optimum, tambahkan kelas namakan butang radio untuk versi lama Internet Explorer.

Untuk borang dengan berbilang butang radio pada baris yang sama, penanda yang disyorkan ialah:

<fieldset>
    <div class="some-class">
        <input type="radio" class="radio" name="..." value="...">
        <label for="...">...</label>
    </div>
</fieldset>

Dengan CSS berikut:

fieldset {
    overflow: hidden;
}

.some-class {
    float: left;
}

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

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

Dengan melaksanakan teknik ini, adalah mungkin untuk mencapai paparan butang radio dan label pada baris yang sama.

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