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/) Bootstrap 。

编辑:@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:问题不在于
标签，因为当我删除第二个元素时， View 源显示时没有标签，但仍然在 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 Bootstrap (metro-bootstrap.css) 中。正如@drigomed 所说，它正在将所有标签设置为显示为 block 。

.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 将其删除即可。