我有一個包含 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>
uj5u.com熱心網友回復：
您可以使用column-count來決定您希望擁有多少列ul。
.columns {
width: 150px;
column-count: 2;
}<div class="columns">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>uj5u.com熱心網友回復：
你也可以使用display: grid
ul {
display: grid;
grid-template-columns: 50% 50%;
}
uj5u.com熱心網友回復：
只需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>uj5u.com熱心網友回復：
在拆分發生之前，您需要使用 for 回圈來跟蹤您所在的行。我喜歡使用 php，因為它是一種通用的 oop 語言。您可以在此處使用示例：https ://www.w3schools.com/php/php_looping_foreach.asp 。
然后你可以使用像 boostrap 這樣的 UI 框架來安排你的列：https ://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp 。
一旦你將這兩個概念結合起來，你就應該開始了。
祝你好運。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486794.html