Как остановить текст ярлыка RadioButtonList от наложения на кнопку

Question

У меня есть список переключателей, и некоторые ярлыки довольно длинные, поэтому они переносятся, и под переключателем появляется вторая строка. В идеале я хотел бы, чтобы текст был перенесен со второй строки, начинающейся под первым символом первой строки.

Есть идеи как? или я должен был бы сделать свой собственный элемент управления на основе списка для этого?

Answer 1

Этот 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" ....>

Answer 2

Я знаю, что в игре немного поздно, но у меня это сработало:

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

Когда я использовал подход выбранного ответчика, проблема с переносом была исправлена, но из-за этого переключатели отображали пиксели ниже, чем надписи. Я использую режим совместимости IE9.

Answer 3

Вы можете взять переключатель и отдельную метку и установить свойство 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>

Answer 4

Если у кого-то возникают проблемы с получением выбранного ответа на работу: он работает только в том случае, если ваш RadioButtonList использует RepeatLayout="Table", а не RepeatLayout="Flow". Мне понадобилась минутка, чтобы поймать это.

Answer 5

попробуйте использовать отрицательный текстовый отступ -20px работает для IE8