如何在 ASP.NET RadioButtonList 中的项目之间添加空格

Posted 2023-03-06

【中文标题】如何在 ASP.NET RadioButtonList 中的项目之间添加空格

【英文标题】：How do I add space between items in an ASP.NET RadioButtonList

【发布时间】：2010-12-21 18:47:10

【问题描述】：

我有一个 ASP.NET RadioButtonList，它使用 RepeatDirection="Horizo​​ntal" 将四个项目显示在一行上。我正在使用 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>

...这对我尖叫“你做得不对！”

实现此目的的正确方法是什么？

【参考方案1】：

使用 css 为这些特定元素添加右边距。通常我会构建控件，然后运行它以查看生成的 html 结构是什么样的，然后让 css 仅更改这些元素。

最好通过设置类来做到这一点。将CssClass="myrblclass" 属性添加到您的列表声明中。

您还可以通过编程方式为项目添加属性，这将在另一边出现。

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

这可能对您更好，因为您可以为除最后一个之外的所有属性添加该属性。

【讨论】：

在前三个元素的结束标记之前添加 style="margin-right:30px" 就可以了。看过之后就很明显了。 :-)

我认为它应该是： rblMyRadioButtonList.Items[x].Attributes.CssStyle.Add("margin-right", "5px") 我会解释他必须为每个项目列表。

【参考方案2】：

我知道这是一个老问题，但我是这样做的：

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

将此用作您的课程：

.rbl input[type="radio"]

   margin-left: 10px;
   margin-right: 1px;

【讨论】：

Russell 已经提供了这个答案。回答时请坚持提供新的解决方案。

嘿泰勒，从你的精英高马身上下来。鲁本的答案更好/更有效，票数证明了；）

【参考方案3】：

如果重复布局是表格，您还可以使用单元格间距和单元格填充属性。

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

【参考方案4】：

更简单...

ASP.NET

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

CSS

.FormatRadioButtonList label

  margin-right: 15px;

【参考方案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>

【参考方案6】：

尽管如此，这种情况的最佳方法是设置自定义 CSS 样式 - 替代方法可能是：

使用

Width

属性并设置您认为更适合您的用途的百分比。

在我想要的场景中，我需要如下设置 (2) 单选按钮/项目：

o Item 1	o Item 2

例子：

<asp:RadioButtonList ID="rbtnLstOptionsGenerateCertif" runat="server" 
    BackColor="Transparent" BorderColor="Transparent" RepeatDirection="Horizontal" 
    EnableTheming="False" Width="40%">
    <asp:ListItem Text="Item 1" Value="0" />
    <asp:ListItem Text="Item 2" Value="1" />
</asp:RadioButtonList>

渲染结果：

<table id="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif" class="chxbx2" border="0" style="background-color:Transparent;border-color:Transparent;width:40%;">
  <tbody>
    <tr>
      <td>
        <input id="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_0" type="radio" name="ctl00$ContentPlaceHolder$rbtnLstOptionsGenerateCertif" value="0" checked="checked">
        <label for="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_0">Item 1</label>
      </td>
      <td>
        <input id="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_1" type="radio" name="ctl00$ContentPlaceHolder$rbtnLstOptionsGenerateCertif" value="1">
        <label for="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_1">Item 2</label>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

这完全符合我的需要。