您需要将列中的每个项目都显示为“内联块”。这将解决您的问题,而无需使用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>