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


Bạn nên chỉnh sửa câu hỏi của bạn để làm cho nó rõ ràng bạn có nghĩa là "trong HTML". Tôi sẽ trả lời câu hỏi của bạn cho Java ... - Richard T
Tôi hy vọng @Richard T có nghĩa là JavaScript - QueueHammer
... hoặc Swing .... - devios1
Tôi thiết lập một JSFIddle để minh họa một số gợi ý: jsfiddle.net/casebash/XNJxT/906 - Casebash
"sắp xếp đúng ý nghĩa của bạn? Điều gì được tính là phù hợp? - Raedwald


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âu trả lời thực sự hay - cũng được nghiên cứu và nó hoạt động. Càng nhìn vào CSS, các cài đặt lề và lề được bản địa hoá càng có vẻ là chìa khóa. Cảm ơn! - penderi
một số css tốt đẹp cho điều này, vì vậy bạn không phải phong cách mỗi nút và hộp - đầu vào [type = "radio"], input [type = "checkbox"] {vertical-align: middle; lề: 0px; } - perilandmishap
FYI, px sau 0 là dư thừa. Khi giá trị CSS là 0, đơn vị không quan trọng, vì vậy margin:0 sẽ đủ. - jedmao
BTW, tôi không thể làm điều này để làm việc hoặc :( jsfiddle.net/gNVsC - jedmao
Hãy nhớ kiểm tra vertical-align các phần tử khác trong cùng một dòng (ví dụ: <label>) khi sử dụng giải pháp này. - Diogo Kollross


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 không hiểu tại sao câu trả lời của bạn không được chấp nhận, đó là câu trả lời đơn giản nhất dành cho tất cả các trình duyệt chính (kể từ 18.Apr.2010) - Chris
Xin lưu ý rằng DOCTYPE của tài liệu của bạn phải là STRICT để xem các hiệu ứng của VERTICAL-ALIGN.
Tôi nghĩ lý do này không được chấp nhận vì câu trả lời là vì, vì câu trả lời đã được chọn cho biết, một số trình duyệt thêm các giá trị lề không đối xứng, điều này ngăn cản phương pháp này hoạt động. - DaveyDaveDave


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



Đó là margin-top: -1px; đó là nước sốt thêm nhận được phiếu bầu của tôi. Tôi có một đài phát thanh bên trong một khoảng tôi đang sử dụng như một nút. chỉ đặt thẳng đứng cho phong cách radio đặt radio chỉ đi qua đáy của nhịp. đặt dọc-align trong phong cách span lá nút ở đầu trang. Chỉ có margin-top dường như không có hiệu lực. Nhưng đặt chúng lại với nhau và voila - gordon
-1px làm gì? - Casebash
-1. Đây là một ý tưởng tồi, bạn đang làm cho phần tử radio chuyển lên làm cho nó không khớp với các phần tử xung quanh khác. Hãy thử nó với một số đầu vào vô tuyến cái khác với các yếu tố khác ở hai bên. - codenamezero


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



Cảm ơn bạn đã phản hồi, nhưng tôi e rằng nó không giải quyết được vấn đề căn chỉnh. Tôi nên rõ ràng hơn. Mục đích của tôi là sắp xếp dọc các hộp kiểm / nút radio với nhãn của chúng. - Jan Zich
Bạn có thể làm điều này với mã của tôi. Chơi về với lề trên nhãn, và bạn cũng có thể thêm nó vào phần tử đầu vào nếu bạn muốn. Vì vậy, nhãn {margin: 10px 0px 0px 10px; float: trái; } sẽ đẩy nhãn xuống 10 pixel. - Keith Donegan
Bạn có thể làm điều đó, nhưng một trong những điểm trong câu hỏi ban đầu là không giả định bất cứ điều gì về kích cỡ của các nút / hộp kiểm radio. Nhiều khả năng câu hỏi của tôi quá lạc quan. - Jan Zich


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



Điều truyền thông đã giúp tôi rất nhiều với các thiết bị di động. Cám ơn! - Sven van Zoelen


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



Chiều cao phù hợp cố định radio của tôi. Không phải hộp kiểm nhưng không lo lắng vì site.css của chúng tôi khá phức tạp. - SushiGuy


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

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

1
2018-01-06 07:21