如何在 RadioButtonList asp.net 控件的列表项之间添加空格？答案

【问题标题】：How to add space in-between the list items of a RadioButtonList asp.net Control?如何在 RadioButtonList asp.net 控件的列表项之间添加空格？
【发布时间】：2015-03-20 03:57:10
【问题描述】：

花了一些时间在谷歌上搜索这个问题并尝试了一些事情，但我似乎无法找到解决方案。我有一个 RadioButtonList 控件，如下所示：

<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal">
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="green">Green</asp:ListItem>
</asp:RadioButtonList>

现在，当我在浏览器中查看它时，两个按钮确实靠得很近。有什么办法让我把它们分开吗？我尝试了margin-left css，但没有对其进行排序。任何建议都会很棒。谢谢。

【问题讨论】：

我们需要查看附加到输出 HTML 的 CSS

标签： c# css asp.net radiobuttonlist

【解决方案1】：

您可以通过多种方式做到这一点。例如，您可以设置RadioButtonList 控件的CssClass 属性。往下看。

<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal" CssClass="spaced">
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="green">Green</asp:ListItem>
</asp:RadioButtonList>

然后在您的 css 声明中，您可以像这样定义 spaced 类

.spaced input[type="radio"]
{
   margin-right: 50px; /* Or any other value */
}

或者，如果您希望对列表项使用不同的间距，您可以通过为每个 listitem 指定 style 属性来做到这一点

<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal">
<asp:ListItem Value="red" style="margin-right:20px">Red</asp:ListItem>
<asp:ListItem Value="green" style="margin-right:30px">Green</asp:ListItem>
</asp:RadioButtonList>

【讨论】：

我喜欢第二种方式。更灵活。非常感谢。

【解决方案2】：

只需为其添加一些 CSS：

input[type="radio"] {
 margin: 10px 10px;
}

【讨论】：

【解决方案3】：

只需为它添加一些 CSS

input[type=radio] {
    margin-left: 8px;
}

【讨论】：

【解决方案4】：

您是如何将 CSS 分配给该列表的？我问的原因是因为如果您尝试通过引用不起作用的 ID“rblCheck”将 CSS 分配给列表（.NET 将更改 ID 并将一些数字附加到值）。

尝试添加内联 CSS 或为列表指定一个类以分配 CSS。

【讨论】：