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

Question

我正在构建一个以多列格式呈现给用户的菜单系统。 CSS3 中的 column-count 属性让我完成了 90% 的事情，但我在 Chrome 下遇到对齐困难。

菜单比较简单:

• 由column-count 属性
分成多列的无序列表
• 列应该按顺序填充，所以 column-fill: auto
• 菜单项表示为列表项
• 每个列表项都有一个可点击的 anchor 标记，通过 display: block 完全扩展

我遇到的对齐问题最明显的是每个列表项都有顶部边框和一些背景颜色。在 Firefox 中，列表项总是在每一列中整齐地对齐，从不渗入上一列/下一列。在 Chrome 中，对齐是一件很麻烦的事情，它会随着存在的列表项数量和任何填充/边距属性而变化。

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

问题应该很明显:在 Chrome 中，第二列中的第一个列表项会渗回第一列。当您删除列表项(单击它们)时，您可以看到对齐进一步分解。

我曾尝试调整列表项的填充/边距，但无济于事:Chrome 在如何让内容跨多列布局流动方面似乎有一个有缺陷的算法。

我没有完全放弃列计数(支持手动生成/Columnizer 等)的主要原因是菜单系统还涉及跨多个子菜单的拖放功能，并且具有菜单以基于列表的内聚层次结构布局的数据有助于干净的代码。

有没有办法解决 Chrome 中的对齐问题，或者我应该暂时放弃 column-count？

添加:

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

Answer 1

您需要将列中的每个元素显示为“inline-block”。这将解决您的问题，而无需使用 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>