web-dev-qa-db-fra.com

Comment ajouter de l'espace entre les éléments dans un RadioButtonList ASP.NET

J'ai un ASP.NET RadioButtonList qui affiche quatre éléments en utilisant RepeatDirection = "Horizontal" pour les afficher sur un seul ligne. J'utilise RepeatLayout = "Flow" pour éviter le balisage d'une table. Cependant, cela entraîne le placement des éléments de la liste les uns à côté des autres, ce qui ne semble pas bon.

J'ai donc essayé la disposition du tableau pour tirer parti de CellSpacing et/ou CellPadding propriétés. Malheureusement, ces propriétés affectent à la fois l'espacement/rembourrage vertical et horizontal dans la table, donc pendant que j'obtiens l'espacement horizontal, j'obtiens également un espacement vertical indésirable.

À ce stade, j'en suis à 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 "Tu ne le fais pas bien!"

Quelle est la bonne façon d'y parvenir?

asp.netformattingmarkupradiobuttonlist
28
JeffK

Utilisez css pour ajouter une marge droite à ces éléments particuliers. En général, je construisais le contrôle, puis je l'exécutais pour voir à quoi ressemblait la structure HTML résultante, puis je faisais en sorte que le CSS modifie uniquement ces éléments.

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

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

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

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

15
Russell Steen

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-le comme classe:

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

Encore plus facile ...

ASP.NET

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

CSS

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

vous pouvez également utiliser les propriétés d'espacement de cellule et de remplissage de cellule si la disposition de répétition est un tableau.

    <asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" CellPadding="3" CellSpacing="2">
6
DotNetUser
<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>
1
srinu