Question

我已经查看了我的问题的解决方案，例如https://stackoverflow.com/posts/6930648/revisions，但是当这些文本放在我想要的第一行文本时，第二行和第三行（下面是复选框）没有与首先，他们排列在复选框本身下方。

我也玩过'自动换行'和inherts，但还没有找到合适的解决方案。下面的代码只显示正确的第一行。

我正在使用的代码：

CSS -

#CheckListWrapper 

 label
 {

     margin-left:30px;     
     width: 500px;
  }

VB

 <div id="CheckListWrapper">
        <asp:CheckBoxList runat="server" ID="CheckBoxList1"  CssClass="CheckboxList">
     </asp:CheckBoxList></div>  <!-- CheckListWrapper -->

Answer 1

您可以尝试将RepeatLayout="UnorderedList"用于<asp:CheckBoxList控件，然后使用自定义CssClass设置布局样式。您可以根据需要使用以下样式并进行一些修改。如果您想将复选框列表排成一行，则可以将li显示更改为inline-block等。

.checkbox-list-block {
list-style: none;
margin: 0;
padding:0;
}
.checkbox-list-block li {
display:block;
}
.checkbox-list-block li label {
display:inline-block;
margin-left:4px;
}
.checkbox-list-block li input[type="checkbox"] {
margin-bottom: 2px;
}

根据：CheckBoxList.RepeatLayout Property

从ASP.NET 4开始，有两个新选项：OrderedList和UnorderedList。

另请参阅this。

使用Checkbox List进行CSS对齐（runat = Server）

1 个答案: