Comment ajouter de l'espace entre les éléments d'une liste ASP.NET RadioButtonList

Question

J'ai une liste de radio ASP.NET RadioButtonList qui affiche quatre éléments à l'aide de RepeatDirection = "horizontal" pour les afficher sur une seule ligne. J'utilise RepeatLayout = " Flow & pour éviter le balisage d'une table. Cependant, les éléments de la liste sont placés les uns à côté des autres, ce qui n’apparaît pas bien.

J'ai donc essayé la présentation du tableau pour tirer parti des propriétés CellSpacing et / ou CellPadding . Malheureusement, ces propriétés affectent l’espacement vertical et horizontal dans le tableau. Par conséquent, même si j’obtiens l’espacement horizontal, j’obtiens aussi un espacement vertical non souhaité.

À ce stade, je suis réduit à ceci:

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

... qui me crie "Vous ne le faites pas bien!"

Quel est le bon moyen d'y parvenir?

Answer 1

Utilisez css pour ajouter une marge de droite à ces éléments particuliers. Généralement, je construirais le contrôle, puis l'exécuter pour voir à quoi ressemblerait la structure html résultante, puis faire en sorte que le CSS modifie uniquement ces éléments.

De préférence, vous le faites en définissant la classe. Ajoutez l'attribut CssClass = "myrblclass" à votre déclaration de liste.

Vous pouvez également ajouter des attributs aux éléments par programmation, ce qui ressortira de l'autre côté.

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

Cela peut être mieux pour vous puisque vous pouvez ajouter cet attribut à tous sauf le dernier.

Answer 2

Je sais que c’est une vieille question mais je l’ai fait comme:

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

Utilisez ceci comme classe:

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

Answer 3

Encore plus facile ...

ASP.NET

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

CSS

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

Answer 4

vous pouvez également utiliser les propriétés cellpacing et cellpadding si la disposition répétée est un tableau.

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