RadioButtonList固定宽度问题

Question

我搜索了这个问题，但是没有找到它。我的问题是这个单选按钮列表，我试图与它的标签对齐，但不断得到这个。

​

正如你所看到的，按钮列表的宽度是固定的，我不能改变。红色圆圈是我想要对齐单选按钮的位置。我试着textalign="right“，但它重叠到第二行，因为名字前有很宽的空格(dr。先生...)像这样..。如你所见宽度是固定的..。

​

下面是我的代码..。有什么办法解决这个愚蠢的问题吗？谢谢

<div style="padding:5px;"><label>Prefix *</label>
<asp:RadioButtonList id="Prefix" runat="server" TextAlign="Left" RepeatDirection="Vertical">
    <asp:listitem id="Dr" runat="server" >Dr.</asp:listitem>
    <asp:listitem id="Mr" runat="server" >Mr.</asp:listitem>
    <asp:listitem id="Mrs" runat="server" >Mrs.</asp:listitem>
    <asp:listitem id="Miss" runat="server" >Miss</asp:listitem>
    <asp:listitem id="Ms" runat="server" >Ms.</asp:listitem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator id="RequiredFieldValidator2" runat="server"
       ControlToValidate="Prefix"
       ErrorMessage="Prefix is required."
       ForeColor="Red">
    </asp:RequiredFieldValidator></div>

更新-

我有下面的css，它应该对齐所有的标签，如“前缀*”…那么为什么它会影响到单选按钮。有没有什么方法可以解决这个问题？

 label
    {
        width: 20em;
        float: left;
        text-align: right;
        margin-right: 0.5em;
        display: block;
        color: Black;
     }

Answer 1

为单选按钮列表指定一个类名

<asp:RadioButtonList id="Prefix" runat="server" CssClass="radioButtonList" RepeatDirection="Vertical">
    <asp:listitem Value="Dr">Dr.</asp:listitem>
    <asp:listitem Value="Mr">Mr.</asp:listitem>
    <asp:listitem Value="Mrs">Mrs.</asp:listitem>
    <asp:listitem Value="Miss">Miss</asp:listitem>
    <asp:listitem Value="Ms">Ms.</asp:listitem>
</asp:RadioButtonList>

.radioButtonList input
 {    
      float: left;
 }

 .radioButtonList label
 {    
      margin-left: 10px;
      display: block;
      text-align: left;
 }