css 如何在特定元素后将列表拆分为两列？

5ktev3wc 于 2023-04-01 发布在其他

关注(0)|答案(4)|浏览(163)

我有一个包含6个项目的列表，我想将它排列成两列布局。拆分需要在元素编号3之后进行。因此，左列中有3个li元素，右列中有3个元素。我如何实现这一点？我根本无法编辑HTML。
这是HTML布局：

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

4条答案

您可以使用column-count来决定希望ul具有多少列。

.columns {
  width: 150px;
  column-count: 2;
}

<ul class="columns">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

您也可以使用display: grid

ul {
  display: grid;
  grid-template-columns: 50% 50%;
}

只需像这样使用column-count CSS属性

ul{
 -webkit-column-count: 2;
 -moz-column-count: 2;
 -o-column-count: 2;
  column-count: 2; 
}

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

你需要使用一个for循环来跟踪你在拆分发生之前所在的行。我喜欢使用php，因为它是一种通用的oop语言。你可以在这里使用这个例子：https://www.w3schools.com/php/php_looping_foreach.asp .
然后你可以使用一个UI框架，比如bootstrap来获得你的列排列：https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp .
一旦你把这两个概念结合起来，你就应该上路了。
祝你好运。