css 有没有更好的方法将列表分成列？

3b6akqbq 于 5个月前发布在其他

关注(0)|答案(1)|浏览(79)

我试着把我的列表分成4列，使用 Bootstrap 我使用网格，感觉这样做是非法的，有更好的方法吗
这就是我所做的：

<div class="grid">
    <ul class="list-group">
        <div class="row">
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                <li class="list-group-item">3</li>
            </div>

            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2f</li>
                <li class="list-group-item">3</li>
            </div>
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                </div>
            <div class="col">                
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
            </div>
        </div>
    </ul>
</div>

字符串
我想它打破不添加任何div标签有办法吗？

css

来源：https://stackoverflow.com/questions/77719841/is-there-a-better-way-to-break-a-list-into-columns

1条答案

按热度按时间

30byixjq1#

您可以使用CSS columns属性来实现：

ul {
  columns: 4;
}

字符串

ul {
  columns: 4;
}

<div class="grid">
  <ul class="list-group">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2f</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>             
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
  </ul>
</div>

的数据
请注意，列表项之间也不能有div。
编辑：我刚刚注意到你想要在最后两列中的每一列都有两个项目，所以columns可能不是你想要的。但是如果你知道你将拥有的列表项目的数量，你可以通过像nth-child这样的目标来将列表项目放置到一个网格中，而不是使用div。

赞(0）回复(0）举报 5个月前

我来回答

css 有没有更好的方法将列表分成列？

1条答案

相关问题

热门标签

最新问答