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

将此属性设置为您的 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 将其删除。

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>

重复布局改变了它的外观，您可以使用表格、列表类型和流程（流程删除表格边框，只显示复选框和文本）

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

Answer 3

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

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

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

Answer 4

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

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