RadioButtonList 固定宽度问题答案

【问题标题】：RadioButtonList fixed width issueRadioButtonList 固定宽度问题
【发布时间】：2012-10-24 20:02:43
【问题描述】：

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

您可以看到按钮列表具有我无法更改的固定宽度。红色圆圈是我想要对齐单选按钮的位置。我试图 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;
     }

【问题讨论】：

如果你像标签所说的那样使用 ASP.NET MVC 3，为什么要使用 <asp:RadioButtonList> 构建单选按钮列表？
很抱歉...我没有在这个项目上使用 mvc
我认为你的 CSS 打破了这一点。如果您只使用 TextAlign="Right" 没有样式，它应该可以正常工作
是的 Tariqulazam...我已经用我的 css 更新了我的帖子...但它只是假设更改标签的宽度..而不是单选按钮...为什么它会影响单选按钮...该css是否有任何覆盖？
@EagleFox - 如果您发布实际的最终 HTML 标记和 CSS 样式（可能在 jsfiddle 或其他地方），调试会更容易。

标签： asp.net visual-studio-2010 web-applications radiobuttonlist fixed-width

【解决方案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;
 }

【讨论】：