您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

您需要将列中的每个项目都显示为“内联块”。这将解决您的问题,而无需使用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>
CSS 2022/1/1 18:13:41 有796人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶