Question

我有一个ASP.NET RadioButtonList，它使用 RepeatDirection =“Horizontal” 显示四个项目，以便在一行显示它们。我正在使用 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>

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

实现这一目标的正确方法是什么？

Answer 1

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

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

将此作为您的班级使用：

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

Answer 2

更容易......

ASP.NET

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

CSS

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

Answer 3

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

最好通过设置课程来完成此操作。将CssClass="myrblclass"属性添加到列表声明中。

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

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

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

Answer 4

如果重复布局是表格，您还可以使用cellspacing和cellpadding属性。

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

Answer 6

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

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

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

<头>


`o` 项目 1	`o` 项目 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>

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

6 个答案: