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

Question

У меня есть ASP.NET RadioButtonList, который отображает четыре элемента, используя RepeatDirection = "Horizontal" , чтобы отобразить их в одной строке. Я использую 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>

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

Как правильно это сделать?

Answer 1

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

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

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

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

Answer 2

Еще проще ...

ASP.NET

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

CSS

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

Answer 3

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

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

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

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

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

Answer 4

Вы также можете использовать свойства cellspacing и cellpadding, если повторяющийся макет таблицы.

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

Answer 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>