对齐单选按钮一个在另一个之下 [英] align radio button one below the other

问题描述

如何让单选按钮显示一个在另一个下面这样的？

How do i have the radio button show one below the other like this?

                 Sex                 (button)Male
                                     (button) Female

无论我做什么，我都会这样

Whatever i do, i get like this

                   Sex                 (button)Male
                   (button) Female

我如何做第二个单选按钮左边缘的边距，使它在第一个下方？

how do i do the margin left of the second radio button so that it is right below the first one?

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

推荐答案

- div s，或添加额外的间距以对齐第二个项目。

You need to either group the items in side-by-side divs, or add additional spacing to align the second item.

floated divs：

floated divs:

<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

You can also do it as a 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>

这篇关于对齐单选按钮一个在另一个之下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！