ASP.NET CheckBoxList ListItem 不换行

Question

我在使用 CheckBoxList 控件时遇到了一些问题。

如图所示：http://i.stack.imgur.com/IkHXT.png,

每个 ListItem 显示在 2 个单独的行中，而不仅仅是一个。

这是代码：

        <asp:CheckBoxList ID="cblTest" runat="server">
                <asp:ListItem Text="First item"></asp:ListItem>
                <asp:ListItem Text="Second item"></asp:ListItem>
        </asp:CheckBoxList>

作为参考，我使用的是 MetroUI-CSS (http://metroui.org.ua/) 引导程序。

编辑： @Royi Namir：我尝试使用 JQuery 删除标签，但它不起作用。标签还在。

    <asp:CheckBoxList ID="cblTest" RepeatLayout="Flow" runat="server">
        <asp:ListItem Text="First item"></asp:ListItem>
        <asp:ListItem Text="Second item"></asp:ListItem>
    </asp:CheckBoxList>
    <script type="text/javascript">
        $('#cblTest').find('br').remove();
    </script>

编辑 2： @Royi Namir：问题不在于
标签，因为当我删除第二个项目时，视图源显示没有标签，但仍然在 2 个单独的行中。

<span id="body_cblTest"><input id="body_cblTest_0" type="checkbox" name="ctl00$body$cblTest$0" value="First item" /><label for="body_cblTest_0">First item</label></span>

编辑 3： 问题出在 MetroUI-CSS 引导程序 (metro-bootstrap.css) 中。正如@drigomed 所说，它将所有标签设置为显示为块。

.metro label {
  display: block; /*set this to inline-block*/
  margin: 5px 0;
}

Answer 1

以下代码对我有用。重复方向到水平。

 <asp:RadioButtonList ID="rbSurveyInsurance" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
                 <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                  <asp:ListItem Text="No" Value="0"></asp:ListItem>
  </asp:RadioButtonList>

Answer 2

我遇到了同样的问题，但对我来说解决方案有所不同，因为我之前没有为标签设置任何显示属性。

我使用了 CheckBoxList 的两个属性，这将我的列表完全按照我想要的方式排序：

<asp:CheckBoxList ID="cbInterimRent" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" >
    <asp:ListItem Value="1">Yes</asp:ListItem>
    <asp:ListItem Value="0">No</asp:ListItem>
</asp:CheckBoxList>

Repeat Layout 改变了它的外观，可以使用表格、列表类型和流（Flow 移除表格边框，只显示复选框和文本）

重复方向允许您选择项目出现的方向。就我而言，这是我必须使用它来将列表从垂直显示更改为水平显示。

Answer 3

我也遇到了同样的问题。当 RepeatLayout 设置为 Flow 时，复选框控件的文本部分呈现为标签。

所以，它的发生是因为引导程序，它将所有标签设置为显示为块。为了解决这个对应用程序的其余部分造成任何问题的问题，我将复选框包装到具有特定类的 div 或 p 中，并设置到我的 css 中：

.pCheck label {
    display: inline-block;
    margin-left: 5px;
}

Answer 4

将此属性设置为您的 CheckBoxList ：

  <asp:CheckBoxList    RepeatLayout="Flow"  

这将使您的渲染像您一样呈现为表格。

额外的 br 是通过 asp.net 插入的：http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeatlayout(v=vs.110).aspx

只需使用 JS 删除即可。