29

我有一个 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>

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

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

4

6 回答 6

41

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

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

将此用作您的课程：

.rbl input[type="radio"]
{
   margin-left: 10px;
   margin-right: 1px;
}
于 2011-10-26T08:12:24.177 回答
18

更容易...

ASP.NET

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

CSS

.FormatRadioButtonList label
{
  margin-right: 15px;
}
于 2012-10-02T02:42:04.197 回答
17

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

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

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

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

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

于 2009-11-30T20:17:42.813 回答
6

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

    <asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" CellPadding="3" CellSpacing="2">
于 2012-03-27T16:22:42.017 回答
1

尽管如此，这种情况的最佳方法是设置自定义 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>

于 2020-12-24T17:02:15.590 回答
1 
<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>
于 2015-12-23T09:31:24.757 回答