Câu hỏi Liên kết radio / hộp kiểm trong HTML / CSS
Cách sạch nhất để căn chỉnh các nút / hộp kiểm radio 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 đã 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ể được một số người cau mày. Tôi vừa dành thời gian (một lần nữa) điều tra một giải pháp vô giá nhưng thất bại. Tôi đã thử các kết hợp khác nhau của phao nổi, vị trí tuyệt đối / tương đối và các phương pháp tương tự. Không chỉ là họ chủ yếu dựa vào âm thanh trên chiều cao ước tính của các nút / hộp kiểm radio, nhưng chúng cũng 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 mà không giả định bất cứ điều gì về kích thước hoặc quirks trình duyệt đặc biệt. Tôi ổn với việc sử dụng các bảng, nhưng tôi tự hỏi có giải pháp nào khác.
76
2017-12-28 17:40
gốc
Các câu trả lời:
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 khuyến nghị là sử dụng căn chỉnh dọc: giữa:
<input type="radio" style="vertical-align: middle"> Label
Tuy nhiên, vấn đề là điều này vẫn tạo ra sự lệch hướng nhìn thấy được ngay cả khi nó về mặt lý thuyết sẽ hoạt động. Đặc tả CSS2 nói rằng:
dọc-align: giữa: Căn chỉnh giữa điểm giữa của hộp với đường cơ sở của hộp cha và một nửa chiều cao x của bố mẹ.
Vì vậy, nó phải ở trong 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 đề có vẻ là do 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 và hộp kiểm radio. Người ta có thể kiểm tra, ví dụ trong Firefox bằng cách 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ó các lề tương tự. Vì vậy, để có được một sự liên kết hoàn hảo, một trong những nhu cầu để thoát khỏi những lợi nhuận:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
Nó vẫn còn thú vị để lưu ý rằng trong bảng giải pháp dựa trên lợi nhuận bằng cách nào đó ăn và tất cả mọi thứ sắp xếp độc đáo.
116
2018-05-20 21:55
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;
}
31
2017-10-28 15:02
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;}
13
2017-12-28 18:07
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 */
6
2017-07-08 22:34
Đâ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>
4
2018-01-09 13:07
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>
3
2017-10-21 23:38
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>
2
2018-04-19 19:20
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 />
2
2018-06-21 08:27
Đâ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;
}
1
2017-11-29 21:25
Có một số cách để thực hiện nó:
Đố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>
Đố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"/>
Đối với RadioButtonList:
<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
Đố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>`
1
2018-01-06 07:21