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

一尘不染

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

css

我正在构建以多列格式呈现给用户的菜单系统。CSS3中的 column-count 属性使我获得了90％的访问权限，但是在Chrome下对齐时遇到了困难。

菜单相对简单：

按 column-count属性* 分为多列的无序列表 *
列应按顺序填充，因此 column-fill：auto
菜单项表示为列表项
每个列表项都有一个可点击的锚标记，通过显示完全扩展：块

我遇到的对齐问题最明显的是每个列表项的顶部边框和一些背景色。在Firefox中，列表项始终在每一列中保持整齐对齐，而不会渗入上一列/下一列。在Chrome浏览器中，对齐方式很简单，随列表项数量和填充/边距属性的不同而不同。

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

该问题应该立即显而易见：在Chrome浏览器中，第二列中的第一个列表项会渗回到第一列中。删除列表项（单击它们）时，可以看到对齐方式进一步细分。

我曾尝试对列表项的填充/边距进行调整，但无济于事：Chrome似乎在算法如何在多列布局中分配内容方面存在缺陷。

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

有没有办法解决Chrome中的对齐问题，还是我现在应该只放弃列数？

添加：

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

阅读 321

2020-05-16

共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>

2020-05-16