Pertanyaan Penyelarasan radio / kotak centang dalam HTML / CSS


Apa cara terbersih untuk menyejajarkan tombol radio / kotak centang dengan benar dengan teks? Satu-satunya solusi yang dapat diandalkan yang telah saya gunakan sejauh ini adalah berdasarkan tabel:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

Ini mungkin disukai oleh beberapa orang. Saya baru saja menghabiskan beberapa waktu (lagi) menyelidiki solusi tableless tetapi gagal. Saya telah mencoba berbagai kombinasi pelampung, posisi absolut / relatif, dan pendekatan serupa. Tidak hanya itu mereka kebanyakan mengandalkan diam-diam pada ketinggian yang diperkirakan dari tombol / kotak centang radio, tetapi mereka juga berperilaku berbeda di browser yang berbeda. Idealnya, saya ingin mencari solusi yang tidak mengasumsikan apa pun tentang ukuran atau quirks browser khusus. Saya baik-baik saja dengan menggunakan tabel, tetapi saya bertanya-tanya di mana ada solusi lain.


76
2017-12-28 17:40


asal


Jawaban:


Saya pikir saya akhirnya memecahkan masalah. Salah satu solusi yang biasanya direkomendasikan adalah menggunakan vertikal-align: middle:

<input type="radio" style="vertical-align: middle"> Label

Masalahnya, bagaimanapun, adalah bahwa ini masih menghasilkan misalignments terlihat meskipun secara teoritis harus bekerja. Spesifikasi CSS2 mengatakan bahwa:

vertical-align: middle: Sejajarkan titik tengah vertikal kotak dengan garis dasar kotak induk ditambah setengah tinggi x dari orang tua.

Jadi seharusnya di pusat yang sempurna (tinggi-x adalah tinggi dari karakter x). Namun, masalah tampaknya disebabkan oleh browser fakta yang biasanya menambahkan beberapa margin acak yang tidak rata ke tombol radio dan kotak centang. Satu dapat memeriksa, misalnya di Firefox menggunakan Firebug, bahwa marjin kotak centang default di Firefox adalah 3px 3px 0px 5px. Saya tidak yakin dari mana asalnya, tetapi browser lain tampaknya memiliki margin yang sama juga. Jadi untuk mendapatkan kesejajaran yang sempurna, seseorang perlu menyingkirkan margin-margin ini:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Masih menarik untuk dicatat bahwa dalam solusi berbasis tabel, margin entah bagaimana dimakan dan semuanya berjalan dengan baik.


116
2018-05-20 21:55



Berikut ini berfungsi di Firefox dan Opera (maaf, saya tidak memiliki akses ke browser lain saat ini):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

CSS:

.form-field * {
    vertical-align: middle;
}

31
2017-10-28 15:02



Saya menemukan cara terbaik dan termudah untuk melakukannya adalah ini karena Anda tidak perlu menambahkan label, div, atau apa pun.

input { vertical-align: middle; margin-top: -1px;}


13
2017-12-28 18:07



Saya tidak akan menggunakan tabel untuk ini sama sekali. CSS dapat dengan mudah melakukan ini.

Saya akan melakukan sesuatu seperti ini:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

Catatan: Saya telah menggunakan kelas clearfix dari: http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

6
2017-07-08 22:34



Ini adalah sedikit hack tetapi CSS ini tampaknya membuatnya bekerja sangat baik di semua browser sama dengan menggunakan tabel (terpisah dari chrome)

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

Pastikan Anda menggunakan label dengan radio Anda agar berfungsi. yaitu

<option> <label>My Radio</label>

4
2018-01-09 13:07



Jika label Anda panjang dan berjalan di beberapa baris yang mengatur lebar dan tampilan: inline-block akan membantu.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>

3
2017-10-21 23:38



Saya menemukan perbaikan terbaik untuk ini adalah memberi masukan tinggi yang cocok dengan label. Setidaknya ini memperbaiki masalah saya dengan inkonsistensi di Firefox dan IE.

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>

2
2018-04-19 19:20



Kode berikut seharusnya berfungsi :)

Salam,



<type style = "text / css">
input [type = checkbox] {
    margin-bottom: 4px;
    vertical-align: tengah;
}

label {
    vertical-align: tengah;
}
</ style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Tampilkan aset </ label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Tampilkan detektor </ label> <br />

2
2018-06-21 08:27



Ini adalah solusi sederhana yang memecahkan masalah bagi saya:

label 
{

/* for firefox */
vertical-align:middle; 

/*for internet explorer */
*bottom:3px;
*position:relative; 

padding-bottom:7px; 

}

1
2017-11-29 21:25



Ada beberapa cara untuk menerapkannya:

  1. Untuk Kotak Centang Standar ASP.NET:

    .tdInputCheckBox
    { 
    position:relative;
    top:-2px;
    }
    <table>
            <tr>
                <td class="tdInputCheckBox">                  
                    <asp:CheckBox ID="chkMale" runat="server" Text="Male" />
                    <asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
                </td>
            </tr>
    </table>
    
  2. Untuk Kotak Centang DevExpress:

    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>
    
  3. Untuk RadioButtonList:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
       <asp:ListItem>Yes</asp:ListItem>
       <asp:ListItem>No</asp:ListItem>
    </asp:RadioButtonList>
    
  4. Untuk Validator Lapangan yang Diperlukan:

    <asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
    

1
2018-01-06 07:21



Di bawah ini saya akan memasukkan kotak centang secara dinamis. Gaya disertakan untuk menyelaraskan kotak centang dan yang paling penting untuk memastikan bungkus kata lurus. yang paling penting di sini adalah tampilan: tabel-sel; untuk penyelarasan

Kode dasar visual.

'kode untuk secara dinamis memasukkan kotak centang

Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"

'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6

'buat kotak centang

Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()

'hubungkan kotak centang

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

'gaya untuk kotak centang

input[type="checkbox"] {float: left;   width: 5%; height:20px; border: 1px solid black; }

.tdCheck label {     width: 90%;display: table-cell;    align:right;}

.tdCheck {width:100%;}

dan output HTML

<head id="HEAD1">
    <title>
        name
    </title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left;   width: 20px; height:20px;  }
.tdCheck label {     width: 90%;display: table-cell;    align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{

vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1;  border-style:solid;
border-color:green;
    font-size:30px  }
</style>
<body id="bodyInternet"  > 
    <form name="Form2" method="post" action="main.aspx?B" id="Form2">
        <table border="0">
            <tr>
                <td class="tdLabel">
                    <span id="ctl16_ID{A}" class="DynamicLabel">
                        TITLE
                    </span>
                </td>
                <td class="tdCheckTablecell">
                    <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
                        <tr>
                            <td>
                                <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
                                <label for="ctl16_{A}_0">
                                    this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp  
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>


1
2017-08-22 10:42