Как добавить пространство между элементами в ASP.NET RadioButtonList

У меня есть RadioButtonList ASP.NET, который отображает четыре элемента, используя RepeatDirection = "Горизонтальный" , чтобы отображать их в одной строке. Я использую RepeatLayout = "Flow" , чтобы избежать разметки для таблицы. Однако это приводит к тому, что элементы в списке располагаются рядом друг с другом, что выглядит не очень хорошо.

Итак, я попробовал макет таблицы, чтобы использовать свойства CellSpacing и/или CellPadding. К сожалению, эти свойства влияют как на вертикальное, так и на горизонтальное расстояние/заполнение внутри таблицы, поэтому, когда я получаю горизонтальное расстояние, я также получаю нежелательный вертикальный интервал.

В этот момент я не понимаю:

<asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" 
    RepeatDirection="Horizontal"
    RepeatLayout="Flow" >
    <asp:ListItem Selected="false" Text="Item One&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_1" />
    <asp:ListItem Selected="false" Text="Item Two&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_2" />
    <asp:ListItem Selected="false" Text="Item Three&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_3" />
    <asp:ListItem Selected="false" Text="Item Four&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_4" />
</asp:RadioButtonList>

... который кричит на меня "Ты не делаешь это правильно!"

Каков правильный способ выполнить это?

Ответ 1

Используйте css, чтобы добавить правое поле к этим конкретным элементам. Как правило, я бы построил элемент управления, а затем запустил его, чтобы посмотреть, как выглядит результирующая структура html, а затем сделайте css изменением только этих элементов.

Вы можете сделать это, установив класс. Добавьте атрибут CssClass="myrblclass" к объявлению списка.

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

rblMyRadioButtonList.Items[x].Attributes.CssStyle.Add("margin-right:5px;")

Это может быть лучше для вас, так как вы можете добавить этот атрибут для всех, кроме последнего.

Ответ 2

Я знаю, что это старый вопрос, но я сделал это так:

<asp:RadioButtonList runat="server" ID="myrbl" RepeatDirection="Horizontal" CssClass="rbl">

Используйте это как свой класс:

.rbl input[type="radio"]
{
   margin-left: 10px;
   margin-right: 1px;
}

Ответ 3

Еще проще...

ASP.NET

<asp:RadioButtonList runat="server" ID="MyRadioButtonList" RepeatDirection="Horizontal" CssClass="FormatRadioButtonList"> ...

CSS

.FormatRadioButtonList label
{
  margin-right: 15px;
}

Ответ 4

вы также можете использовать свойства cellpacing и cellpadding, если повторная компоновка является таблицей.

    <asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" CellPadding="3" CellSpacing="2">

Ответ 5

<asp:RadioButtonList ID="rbn" runat="server" RepeatLayout="Table" RepeatColumns="2"
                        Width="100%" >
                        <asp:ListItem Text="1"></asp:ListItem>
                        <asp:ListItem Text="2"></asp:ListItem>
                        <asp:ListItem Text="3"></asp:ListItem>
                        <asp:ListItem Text="4"></asp:ListItem>
                    </asp:RadioButtonList>