asp.net - RadioButtonList 固定宽度问题

Question

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

如您所见，按钮列表具有我无法更改的固定宽度。红色圆圈是我要对齐单选按钮的位置。我试图 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 假设对齐所有标签，如“前缀 *”......那么为什么它会影响单选按钮......并且是否有某种覆盖来修复它？

 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>

并使用以下 CSS

.radioButtonList input
 {    
      float: left;
 }

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