Câu hỏi Liên kết radio / hộp kiểm trong HTML / CSS

Các công trình sau đây trong 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 tại thời điểm 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 này là vì bạn không cần phải 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. 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 của một hack nhưng CSS này dường như làm cho nó hoạt động rất độc đáo trong tất cả các trình duyệt giống như sử dụng các bảng (ngoài 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 bạn sử dụng nhãn với radio của mình để radio hoạt động. I E.

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

Nếu nhãn của bạn dài và đi trên nhiều hàng, hãy đặt chiều rộng và hiển thị: inline-block sẽ giúp bạn.

.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 tìm 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 được sự cố của tôi với những mâu thuẫ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>

Mã sau đây sẽ hoạt động :)

Trân trọng,

<style type = "text / css">
đầu vào [type = checkbox] {
    margin-bottom: 4px;
    dọc-align: giữa;
}

nhãn {
    dọc-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úp giải quyết 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 tiêu 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 Hộp kiểm DevExpress:

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