列表项的CSS多列布局在Chrome中无法正确对齐

Question

我正在构建一个以多列格式呈现给用户的菜单系统.CSS3中的列数属性让我获得了90%的优势,但我在Chrome下的对齐方面遇到了困难.

菜单相对简单:

• 由列计数属性划分为多列的无序列表
• 列应按顺序填充,因此列填充:auto
• 菜单项表示为列表项
• 每个列表项都有一个可点击的锚标记,通过display:block完全扩展

我所拥有的对齐问题最明显,每个列表项都有一个顶部边框和一些背景颜色.在Firefox中,列表项始终在每列中干净地对齐,从不会流入上一列/下一列.在Chrome中,对齐是一个废话,随着列表项的数量和任何填充/边距属性而变化.

我在这里发布了一个简单测试用例的代码:http://pastebin.com/Ede3JwdG

问题应该立即显而易见:在Chrome中,第二列中的第一个列表项会回流到第一列.当您删除列表项(单击它们)时,您可以看到对齐进一步分解.

我已经尝试调整列表项的填充/边距无济于事:Chrome似乎对于如何在多列布局中流动内容有一个有缺陷的算法.

我没有完全放弃列数(主要是手动生成/ Columnizer /等)的主要原因是菜单系统还涉及跨多个子菜单的拖放功能,并且菜单数据已经布局作为一个基于列表的内聚层次结构,可以实现干净的代码.

有没有办法解决Chrome中的对齐问题,或者我现在应该放弃列数？

添加:

• jsFiddle原型:http://jsfiddle.net/VXsAU/
• JS Bin原型:http://jsbin.com/ebode5/

Answer 1

您需要将列中的每个项目显示为"内联块".这将解决您的问题,而无需使用jQuery.

另外,可以指定每个元素width: 100%以使它们使用行的整个宽度.

这是一个工作示例:

$(document).ready(function() {
    for( var i = 0; i < 24; i++ ) {
        $("ul.newslist").append("<li><a href='#'>Item</a></li>");
    }
    $("ul.newslist > li").click(function() {
        $(this).remove();
    })
});

ul.newslist {
    columns: 5;
    background-color: #ccc;
    padding: 16px 0;
    list-style: none;
}

ul.newslist > li {
    display: inline-block;
    width: 100%;
    border-top: 1px solid #000;
}

ul.newslist > li > a {
    display: block;
    padding: 4px;
    background-color: #f6b;
    text-decoration: none;
    color: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="newslist"></ul>

Answer 2

我设法通过将margin-*属性应用于多列容器内的元素来平衡不均匀的垂直对齐列.

.content {
  column-width: 15em; /* or could be column-count, however you want to set up multi columns */
}
.content > section {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

Answer 3

我也玩过,我在网上看过几个来源,这似乎是webkit的一个已知问题.可以在这里找到一个很好的细分:http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

总有一天,CSS 3!

也许尝试像http://welcome.totheinter.net/columnizer-jquery-plugin/这样的jQuery插件？

Answer 4

至于垂直边距泄漏.您可以使用伪元素替换边距.然后将其高度设置为所需的边距值.您还需要设置-webkit-column-break-inside: avoid;包含伪元素的元素,以便它不会移动到另一列.在css-hack(不推荐)或js-detection(最佳方式)的帮助下,仅针对webkit执行此操作.这是CSS:

.element {
  -webkit-column-break-inside: avoid;
}
.element:after {
  content: '';
  display: block;
  height: 20px;
}

Answer 5

我在多列列表上遇到垂直对齐问题.原来问题是我在我的列表中使用了底部填充 - 我改变了li样式而不是使用底部边距,并且列再次对齐到顶部.