Como faço para adicionar espaço entre itens em um RadioButtonList ASP.NET

Question

Eu tenho um RadioButtonList ASP.NET que exibe quatro itens usando RepeatDirection = "horizontal" para exibi-los em uma única linha. Eu estou usando RepeatLayout = "Flow" para evitar a marcação para uma mesa. No entanto, isso faz com que os itens na lista para ser colocado ao lado uns dos outros, o que não parece bom.

Então, eu tentei o layout da tabela para aproveitar os CellSpacing e / ou CellPadding Propriedades. Infelizmente, essas propriedades afetam tanto o vertical e horizontal espaçamento / preenchimento dentro da mesa, por isso, enquanto eu recebo o espaçamento horizontal, eu também obter o espaçamento vertical indesejada.

Neste ponto, estou resume a isto:

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

... que grita para mim "Você não está fazendo a coisa certa!"

O que é o caminho certo para alcançar este objetivo?

Answer 1

Use css para adicionar uma margem direita aos elementos particulares. Geralmente eu iria construir o controle, em seguida, executá-lo para ver o que a estrutura HTML resultante é como, em seguida, fazer o css alterar apenas a esses elementos.

De preferência, você fazer isso definindo a classe. Adicione o atributo CssClass="myrblclass" a lista sua declaração.

Você também pode adicionar atributos para os itens de programação, que vai sair do outro lado.

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

Isto pode ser melhor para você desde que você pode adicionar esse atributo para todos, mas o último.

Answer 2

Eu sei que isto é uma questão de idade, mas eu fiz isso como:

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

Use isso como sua classe:

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

Answer 3

Mesmo mais fácil ...

ASP.NET

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

CSS

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

Answer 4

Você também pode usar cellspacing e cellpadding propriedades se o layout de repetição é a tabela.

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