выровнять переключатель один под другим

Как я могу установить переключатель ниже, как показано ниже?выровнять переключатель один под другим

    Sex     (button)Male 
            (button) Female

Все, что я делаю, я получаю как этот

    Sex     (button)Male 
        (button) Female

как я сделать запас слева от кнопки второго радио, так что он находится прямо под первым?

  <label for="Sex">Sex:</label> 
      <asp:RadioButton ID="male" runat="server" GroupName="gender" 
        Text="Male"/> 
      <br/> 

      <asp:RadioButton ID="female" runat="server" GroupName="gender" Text="Female"/>

источник

2012-07-03 cableload

OT: Ваш HTML неверен, метка не указывает ни к чему. –

Вам нужно либо группировать элементы в бок о бок с div, или добавить дополнительные пробелы для выравнивания второй пункт.

плавали дивы:

<div style="float: left;"> 
     <span>Sex:</label> 
</div> 
<div style="float: left;"> 
    <asp:RadioButton ID="male" runat="server" GroupName="gender" Text="Male"/> 
    <br/> 
    <asp:RadioButton ID="female" runat="server" GroupName="gender" Text="Female"/>   
</div> 
<div style="clear: both"></div>

или с прокладкой:

<style> 
    .radioButtonPadding { 
     display: inline-block; 
     width: 45px; 
    } 
</style> 

<span class="radioButtonPadding">Sex:</label> 
<asp:RadioButton ID="male" runat="server" GroupName="gender" Text="Male"/> 
<br/> 
<span class="radioButtonPadding">&nbsp;</label> 
<asp:RadioButton ID="female" runat="server" GroupName="gender" Text="Female"/>

Вы также можете сделать это как RadioButtonList

<style> 
    .genderLabel { 
     float: left; 
     display: block; 
    } 
    .genderList { 
     float: left; 
    } 
    .clear { 
     clear: both; 
    } 
</style> 

<asp:Label id="genderLabel" runat="server" CssClass="genderLabel"  
    Text="Sex:" AssociatedControlID="genderList"/> 
<asp:RadioButtonList id="genderList" runat="server" CssClass="genderList"> 
    <asp:ListItem>Male</asp:ListItem> 
    <asp:ListItem>Female</asp:ListItem> 
</asp:RadioButtonList> 
<div class="clear"></div>

источник

2012-07-03 16:58:29 saluce

Спасибо за ваш ответ. Я смог использовать список переключателей и заставить его работать. Поскольку перед этим у меня были некоторые теги span, я не смог очистить с помощью div (ваша последняя строка), но я смог использовать
для очистки элементов. – cableload

http://jsfiddle.net/charlescarver/fUvZR/1/

Вы будете урожденная d a контейнер div с установленной шириной, а затем два внутренних элемента div плавают по бокам.

источник

2012-07-03 16:59:14 Charlie

, так как у меня были некоторые теги span, содержащиеся в разделе кода, я не смог использовать метод div. я мог использовать только радиообъектив. – cableload

Затем используйте теги span. – Charlie

Используйте RadioButtonList

<asp:RadioButtonList ID="RadioButtonList1" 
    runat="server" AutoPostBack="True" CausesValidation="True" 
    onselectedindexchanged="RadioButtonList1_SelectedIndexChanged"> 
    <asp:ListItem Selected="True">male</asp:ListItem> 
    <asp:ListItem>female</asp:ListItem> 
</asp:RadioButtonList>

источник

2012-07-03 16:59:20 KenL

Используйте контроль RadioButtonList и просто установить свойство RepeatDirection к горизонтали:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobuttonlist.repeatdirection.aspx

источник

2012-07-03 16:59:40 IrishChieftain