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：问题不在于标签，因为当我删除第二个项目时，视图源显示没有标签但仍然在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所说，它正在设置所有标签显示为块。

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

Answer 1

将此属性设置为CheckBoxList：

  <asp:CheckBoxList    RepeatLayout="Flow"  

这将使您的渲染以您的方式呈现为表格。

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

插入额外的br

只需使用JS即可删除它。

Answer 2

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

因此，它发生的原因是bootstrap，它将所有标签设置为显示为块。为了解决这个问题，导致应用程序的其余部分出现任何问题，我将我的复选框包装到一个div或p中，并将其设置为我的css：

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

Answer 3

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

我玩的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>

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

重复方向允许您选择项目的显示方向。在我的情况下，这是我必须用来将我的列表从垂直显示改为水平显示。

Answer 4

下面的代码适合我。 RepeatDirection为Horizo​​ntal。

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