我有一个包含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>
0sgqnhkj1#
您可以使用column-count来决定希望ul具有多少列。
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>
2cmtqfgy2#
您也可以使用display: grid
display: grid
ul { display: grid; grid-template-columns: 50% 50%; }
628mspwn3#
只需像这样使用column-count CSS属性
ul{ -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; column-count: 2; }
5lhxktic4#
你需要使用一个for循环来跟踪你在拆分发生之前所在的行。我喜欢使用php,因为它是一种通用的oop语言。你可以在这里使用这个例子:https://www.w3schools.com/php/php_looping_foreach.asp .然后你可以使用一个UI框架,比如bootstrap来获得你的列排列:https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp .一旦你把这两个概念结合起来,你就应该上路了。祝你好运。
4条答案
按热度按时间0sgqnhkj1#
您可以使用
column-count
来决定希望ul
具有多少列。2cmtqfgy2#
您也可以使用
display: grid
628mspwn3#
只需像这样使用
column-count
CSS属性5lhxktic4#
你需要使用一个for循环来跟踪你在拆分发生之前所在的行。我喜欢使用php,因为它是一种通用的oop语言。你可以在这里使用这个例子:https://www.w3schools.com/php/php_looping_foreach.asp .
然后你可以使用一个UI框架,比如bootstrap来获得你的列排列:https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp .
一旦你把这两个概念结合起来,你就应该上路了。
祝你好运。