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

Two options are new as of ASP.NET 4: OrderedList and UnorderedList.

另请引用this .