asp.net - horizontal - radiobuttonlist asp net get selected value

¿Cómo agrego espacio entre los elementos en un RadioButtonList ASP.NET?

Question

Tengo una RadioButtonList de ASP.NET que muestra cuatro elementos usando RepeatDirection = "Horizontal" para mostrarlos en una sola línea. Estoy usando RepeatLayout = "Flujo" para evitar el marcado de una tabla. Sin embargo, esto hace que los elementos de la lista se coloquen uno al lado del otro, lo que no se ve bien.

Por lo tanto, probé el diseño de la tabla para aprovechar las propiedades CellSpacing y / o CellPadding . Desafortunadamente, estas propiedades afectan tanto el espaciado vertical como el horizontal dentro de la tabla, así que mientras obtengo el espaciado horizontal, también obtengo un espaciado vertical no deseado.

En este punto, estoy a esto:

<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 me grita "¡No lo estás haciendo bien!"

¿Cuál es la forma correcta de lograr esto?

Answer 1

Aún más fácil...

ASP.NET

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

CSS

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

Answer 2

Sé que esta es una vieja pregunta pero lo hice como:

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

Usa esto como tu clase:

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

Answer 3

También puede usar las propiedades de espaciado de celda y de relleno de celdas si la disposición repetida es una tabla.

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

Answer 4

Use css para agregar un margen derecho a esos elementos en particular. Por lo general, construyo el control, luego lo ejecuto para ver cómo es la estructura html resultante, y luego hago que el css altere solo esos elementos.

Preferiblemente haces esto estableciendo la clase. Agregue el CssClass="myrblclass" a su declaración de lista.

También puede agregar atributos a los elementos mediante programación, que saldrán por el otro lado.

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

Esto puede ser mejor para usted ya que puede agregar ese atributo para todos menos el último.

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>