CSS 与复选框列表对齐 (runat=Server)

Question

我已经查看了我的问题的解决方案，例如https://stackoverflow.com/posts/6930648/revisions 但是，虽然这些将第一行文本放在我想要的位置，但第二行和第三行（位于复选框下方）并没有与第一行对齐，因为它们在复选框本身下方排列。

我也玩过 'word-wrap' 和 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。