Радио / флажок выравнивания в HTML / CSS

Question

Какой самый чистый способ правильно выровнять радиокнопки / флажки с текстом? Единственное надежное решение, которое я использовал до сих пор, основано на таблицах:

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

Это может быть осуждается некоторыми. Я только что потратил некоторое время (снова), исследуя безбумажное решение, но потерпел неудачу. Я пробовал различные комбинации поплавков, абсолютного / относительного позиционирования и аналогичных подходов. Мало того, что они в основном молча рассчитывали на предполагаемую высоту переключателей / флажков, но и вели себя по-разному в разных браузерах. В идеале я хотел бы найти решение, которое не предполагает ничего о размерах или особых особенностях браузера. Я в порядке с использованием таблиц, но мне интересно, где есть другое решение.

Answer 1

Есть несколько способов реализовать это:

1. Для ASP.NET Standard CheckBox:

   .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. Для DevExpress CheckBox:

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

3. Для списка RadioButtonList:

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

4. Для обязательных полевых валидаторов:

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

Answer 2

Это простое решение, которое решило проблему для меня:

label 
{

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

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

padding-bottom:7px; 

}

Answer 3

input[type="radio"], input[type="checkbox"] {
    vertical-align: middle;
    margin-top: -1;
}