Căn chỉnh radio / hộp kiểm trong HTML / CSS

Cách sạch nhất để căn chỉnh các nút radio / hộp kiểm phù hợp với văn bản là gì? Giải pháp đáng tin cậy duy nhất mà tôi đang sử dụng cho đến nay là dựa trên bảng:

<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>

Điều này có thể bị cau mày bởi một số. Tôi vừa dành thời gian (một lần nữa) để điều tra một giải pháp không có bảng nhưng không thành công. Tôi đã thử các cách kết hợp khác nhau của float, định vị tuyệt đối / tương đối và các cách tiếp cận tương tự. Không chỉ vậy chúng chủ yếu dựa vào chiều cao ước tính của các nút radio / hộp kiểm, mà chúng còn hoạt động khác nhau trong các trình duyệt khác nhau. Lý tưởng nhất, tôi muốn tìm một giải pháp không giả định bất kỳ điều gì về kích thước hoặc các vấn đề đặc biệt của trình duyệt. Tôi ổn với việc sử dụng các bảng, nhưng tôi tự hỏi ở đâu có giải pháp khác.

Tôi nghĩ rằng cuối cùng tôi đã giải quyết được vấn đề. Một giải pháp thường được đề xuất là sử dụng vertical-align: middle:

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

Tuy nhiên, vấn đề là điều này vẫn tạo ra những sai lệch có thể nhìn thấy được mặc dù về mặt lý thuyết nó sẽ hoạt động. Đặc tả CSS2 nói rằng:

vertical-align: middle: Căn chỉnh điểm giữa theo chiều dọc của hộp với đường cơ sở của hộp chính cộng với một nửa x chiều cao của đường chính.

Vì vậy, nó phải nằm ở trung tâm hoàn hảo (chiều cao x là chiều cao của ký tự x). Tuy nhiên, vấn đề dường như là do các trình duyệt thực tế thường thêm một số lề không đồng đều ngẫu nhiên vào các nút radio và hộp kiểm. Người ta có thể kiểm tra, chẳng hạn như trong Firefox sử dụng Firebug, rằng lề hộp kiểm mặc định trong Firefox là 3px 3px 0px 5px. Tôi không chắc nó đến từ đâu, nhưng các trình duyệt khác dường như cũng có lợi nhuận tương tự. Vì vậy, để có được một sự liên kết hoàn hảo, người ta cần phải loại bỏ những lề sau:

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

Điều thú vị vẫn là lưu ý rằng trong giải pháp dựa trên bảng, lợi nhuận bằng cách nào đó được ăn và mọi thứ đều khớp với nhau.

Các tính năng sau hoạt động trên Firefox và Opera (xin lỗi, tôi không có quyền truy cập vào các trình duyệt khác vào lúc này):

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

CSS:

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

Tôi tìm thấy cách tốt nhất và dễ nhất để làm điều đó là cách này vì bạn không cần thêm nhãn, div hoặc bất kỳ thứ gì.

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

Tôi sẽ không sử dụng bảng cho việc này chút nào. CSS có thể dễ dàng làm điều này.

Tôi sẽ làm một cái gì đó như thế này:

   <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; }

Lưu ý: Tôi đã sử dụng lớp clearfix từ: 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 */

Đây là một chút hack nhưng CSS này dường như làm cho nó hoạt động rất tốt trong tất cả các trình duyệt giống như sử dụng bảng (ngoại trừ 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; }
}

Đảm bảo rằng bạn sử dụng nhãn với bộ đàm của mình để nó hoạt động. I E

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

Nếu nhãn của bạn dài và có nhiều hàng, thiết lập chiều rộng và hiển thị: inline-block sẽ hữu ích.

.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>

Tôi thấy cách khắc phục tốt nhất cho điều này là cung cấp cho đầu vào một chiều cao phù hợp với nhãn. Ít nhất điều này đã khắc phục sự cố của tôi với sự không nhất quán trong Firefox và 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>

Đoạn mã sau sẽ hoạt động :)

Trân trọng,

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

nhãn {
    vertical-align: giữa;
}
</style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Hiển thị nội dung </label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Hiển thị trình phát hiện </label> <br />

Đây là một giải pháp đơn giản đã giải quyết được vấn đề cho tôi:

label 
{

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

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

padding-bottom:7px; 

}

Có một số cách để thực hiện nó:

1. Đối với Hộp kiểm chuẩn 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. Đối với DevExpress CheckBox:

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

3. Đối với RadioButtonList:

   <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
      <asp:ListItem>Yes</asp:ListItem>
      <asp:ListItem>No</asp:ListItem>
   </asp:RadioButtonList>
   

4. Đối với Trình xác thực trường Bắt buộc:

   <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>`
   

Dưới đây tôi sẽ chèn một hộp kiểm động. Phong cách được bao gồm để căn chỉnh hộp kiểm và quan trọng nhất là đảm bảo rằng dòng chữ thẳng hàng. điều quan trọng nhất ở đây là display: table-cell; cho sự liên kết

Mã cơ bản trực quan.

'mã để chèn động một hộp kiểm

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

'tạo hộp kiểm

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()

'kết nối hộp kiểm

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

'phong cách cho hộp kiểm

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%;}

và đầu ra 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>

@sfjedi

Tôi đã tạo một lớp và gán các giá trị css cho nó.

.radioA{
   vertical-align: middle;
}

Nó đang hoạt động và bạn có thể kiểm tra nó trong liên kết bên dưới. http://jsfiddle.net/gNVsC/ Hy vọng nó hữu ích.