如何從單個無序列表創建多列？

Question

我想創建這樣一個多列列表： https://jsfiddle.net/37dfwf4u/

沒問題，使用不同的列表中爲每個列時：

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
    <li>item4</li> 
</ul> 
<ul> 
    <li>item5</li> 
    <li>item6</li> 
    <li>item7</li> 
    <li>item8</li> 
</ul> 

ul { 
    display:inline-block; 
} 

然而，這可以通過完成連續列表和純CSS，以便CSS自動排列列？ 例如通過使用我還不熟悉的flex佈局？

Answer 1

是的，你可以創建描述的多列列表，如果你讓ul Flex容器，限制其高度，改變方向柱，讓它包裝：

ul { 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
}

<ul> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li>item3</li> 
 
    <li>item4</li> 
 
    <li>item5</li> 
 
    <li>item6</li> 
 
    <li>item7</li> 
 
    <li>item8</li> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li>item3</li> 
 
    <li>item4</li> 
 
    <li>item5</li> 
 
    <li>item6</li> 
 
    <li>item7</li> 
 
    <li>item8</li> 
 
    <li>item4</li> 
 
    <li>item5</li> 
 
    <li>item6</li> 
 
    <li>item7</li> 
 
    <li>item8</li> 
 
</ul> 
 
<style></style>

Answer 2

考慮使用CSS3多欄佈局爲：

CSS3 Multiple Columns

只需使用一個列表就可以做到這一點，並用CSS定義列數。如果您檢查CSS3多列布局瀏覽器支持here，您可以看到大多數瀏覽器的部分支持，因爲它們不支持折前，折後和折入內部屬性。但是他們確實支持用前綴創建多列列表所需的屬性。

.container { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li>item3</li> 
 
    <li>item4</li> 
 
    <li>item5</li> 
 
    <li>item6</li> 
 
    <li>item7</li> 
 
    <li>item8</li> 
 
    </ul> 
 
</div>