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

Question

我知道这类问题已被提出，但我似乎无法找到满足我需要的答案。

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

1. “意大利”与“德国”不一致
2. 这些国家/地区列在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

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

RepeatColumns="2"

如果要在一列中设置所有复选框，请删除$(document).on("mousedown", "p , h1 , h2", function(){ $(this).hide(); }); 属性，该属性用于设置要在其中显示复选框的列数