对齐复选框列表中的复选框

Question

我知道已经有人问过这类问题，但我似乎找不到满足我需要的答案。

从图中可以看出，我有 2 个问题：

"Italy" 与 "Germany"
虽然下面的最后两个复选框还有空间，但国家/地区列在 2 列中。我希望它们在 2 列中当且仅当 有溢出时。

这是我的代码：

    <div style="width: 94.1%; height: 120px; overflow-y: scroll;background-
    color:#928571;border:groove;">
   <asp:CheckBoxList ID="CBListLang" runat="server"
     RepeatDirection="Vertical" RepeatColumns="2" RepeatLayout="Flow"
     OnSelectedIndexChanged="CBListLang_SelectedIndexChanged" AutoPostBack="true">
   </asp:CheckBoxList>
</div>

谢谢

Answer 1

将 RepeatLayout 更改为 "Table"

Answer 2

@stark 是对的。如果将 RepeatLayout 设置为 Flow，它会导致 CheckBoxList 控件为具有 <br> 元素的复选框输出一个 <span> 元素，从而将复选框放置在行中.在这种情况下，除非您的所有数据大小相同，否则复选框将不会对齐 vertically.Now，如果您将 RepeatLayout 属性设置为 Table，则会导致 CheckBoxList 控件输出包含复选框的 HTML table。使用 Table 确保复选框垂直对齐。

 <asp:CheckBoxList ... RepeatLayout="Table" > </asp:CheckBoxList>

如果要在一列中设置所有复选框，则删除 RepeatColumns="2" 属性，该属性用于设置要显示复选框的列数

对齐复选框列表中的复选框

Align check boxes in checkboxlist

css

asp.net

checkboxlist