如何阻止RadioButtonList标签文本在按钮下包装

I have a radio button list and some of the labels are quite long so they wrap and the second line appears underneath the radio button. Ideally I would like the text to wrap with the second line starting beneath the first character of the first line.

我有一个单选按钮列表，有些标签很长，所以它们换行，第二行出现在单选按钮下面。理想情况下，我希望文本用第一行的第一个字符下面的第二行包装。

Any ideas on how? or would I have to make my own list based control for this?

有关如何的任何想法？或者我是否必须为此制作自己的基于列表的控件？

5 个解决方案

#1

This CSS actually does the trick:

这个CSS实际上可以解决问题：

<style type="text/css">
 table.radioWithProperWrap input
 {    
      float: left;
 }

 table.radioWithProperWrap label
 {    
      margin-left: 25px;
      display: block;
 }
</style>
<asp:RadioButtonList runat="server" CssClass="radioWithProperWrap" ....>

#2

You can take a radio button and a seperate label and set the AssociatedControlID property of that label.

您可以使用单选按钮和单独的标签，并设置该标签的AssociatedControlID属性。

<table>
    <tr>
        <td>
            <asp:RadioButton runat="server" ID="rdo" />
        </td>
        <td>
            <asp:Label runat="server" ID="lbl" Text="Radio Text" AssociatedControlID="rdo" />
        </td>
    </tr>
</table>

#3

I know it's a little late in the game, but this worked for me:

我知道游戏有点晚了，但这对我有用：

    table.NoWrapRadio td
    {
        white-space:nowrap;
    }

When I used the chosen answerer's approach, the wrapping issue was fixed, but it made the radio buttons rendered a vew pixels lower than the labels. I am using IE9 compatability mode.

当我使用所选择的回答方法时，包装问题已得到修复，但它使得单选按钮的渲染像素低于标签。我正在使用IE9兼容模式。

#4

try a negative text-indent style -20px works for IE8

尝试负文本缩进样式-20px适用于IE8

#5

If anyone is having trouble getting the selected answer to work: it only works if your RadioButtonList uses RepeatLayout="Table" and not RepeatLayout="Flow". Took me a minute to catch that.

如果有人在选择的答案工作时遇到问题：只有当您的RadioButtonList使用RepeatLayout =“Table”而不是RepeatLayout =“Flow”时才会有效。我花了一分钟才能抓住这一点。

#1