RadioButtonList固定宽度问题

Question

我搜索了这个问题，但找不到它...我的问题是这个radiobuttonlist我试图与它的标签对齐，但继续得到这个。

你可以看到按钮列表具有我无法改变的固定宽度..红色圆圈是我想要对齐单选按钮的地方。我尝试textalign =“right”但它重叠到第二行，因为名字之前的那个宽阔的空间（博士......）......就像你看到宽度是固定的......

以下是我的代码......任何想法如何解决这个愚蠢的问题???感谢

<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，假设对齐所有标签，如“Prefix *”......那么为什么它会影响radiobuttons ...并且是否有某种覆盖来修复它？

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

Answer 1

将类名分配给radiobutton列表

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

并使用以下CSS

.radioButtonList input
 {    
      float: left;
 }

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