编辑:我删除了 <br>
几个人指出的标签可能会导致问题并使用更正确的 CSS 重新创建相同的布局,我在下面包含了这些布局(在标签上使用 width:100%
而不是中断),但我仍然遇到相同的错误。强>
我正在使用 column-count:2
将一些分组列表放入列中。
我不是经常写这个,但在 IE 上它按预期工作,所有分组列表分成 2 列。
但是,在 Chrome 上,它并没有拆分为只有两个选项的非常短的一组。这是为什么?
IE 版本,按预期工作
Chrome 没有将第一个短组拆分为 2 列
.aoi {
column-count: 2;
padding: 1em 1em 1em 2em;
}
.bfsubs_option_label {
background: url(checkbox_bg.png);
background-repeat: no-repeat;
padding: 0 0 0 1.75em;
height: 18px;
cursor: pointer;
display: inline-block;
margin-bottom: .5em;
background-position: 0 2px;
width: 100%;}
<div class="aoi types-of-communication" style="">
<input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
<label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
<input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
<label class="bfsubs_option_label" for="option_20000">Insights</label><br>
</div>
最佳答案
在这种情况下,我会简单地更改 HTML 结构以将标签/输入包装在 div 中:
.aoi {
column-count: 2;
padding: 1em 1em 1em 2em;
}
<div class="aoi types-of-communication">
<div>
<input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
<label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
</div>
<div>
<input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
<label class="bfsubs_option_label" for="option_20000">Insights</label>
</div>
</div>
有更多的输入:
.aoi {
column-count: 2;
padding: 1em 1em 1em 2em;
}
<div class="aoi types-of-communication">
<div>
<input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
<label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
</div>
<div>
<input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
<label class="bfsubs_option_label" for="option_20000">Insights</label>
</div>
<div>
<input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
<label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
</div>
<div>
<input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
<label class="bfsubs_option_label" for="option_20000">Insights</label>
</div>
<div>
<input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
<label class="bfsubs_option_label" for="option_20000">Insights</label>
</div>
</div>
关于html - 列数不在 Chrome 中的短列上拆分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49318888/