防止列表項填充在水平列表中打包

Question

我正在嘗試製作一個水平無序列表<ul>，每列有四列。
列表項目的數量<li>是動態的，可能會在運行時更改。

目前代碼，並導致

ul { 
    -webkit-columns: 4; /* Chrome, Safari, Opera */ 
    -moz-columns: 4; /* Firefox */ 
    columns: 4; 
    display: block; 
} 

ul li { 
    margin: 20px ; 
    padding: 10px; 
    text-align: center; 
    color: white; 
    display: list-item; 
} 

，給了我這樣的：

這份名單是不是真正水平，因爲第二個元素（綠色）是根據第一個（藍色）和在旁邊，但順序對我來說並不重要。

問題是元素的填充正在包裝到下一列。

有什麼建議嗎？

的jsfiddle：here

Answer 1

試試下面的代碼 Demo

<ul id = "list"> 
<li style="background-color: rgb(51, 70, 115);">1</li> 
<li style="background-color: rgb(156, 78, 129);">2</li> 
<li style="background-color: rgb(121, 159, 59);">3</li> 
<li style="background-color: rgb(51, 70, 115);">4</li>  
<li style="background-color: rgb(51, 70, 115);">5</li> 
<li style="background-color: rgb(121, 159, 59);">6</li> 
<li style="background-color: rgb(156, 78, 129);">7</li> 
<li style="background-color: rgb(156, 78, 129);">8</li> 
</ul> 

#list { 
    -webkit-column-count: 4; 
     -moz-column-count: 4; 
      column-count: 4; /*3 is just placeholder -- can be anything*/ 
} 
#list li { 
    display: inline-block; 
    margin-bottom: 20px; 
     padding:10px 80px; 
} 

Answer 2

您可以添加min-height到<li>，它可能會解決你的問題： -

ul li 
{ 
     margin: 20px ; 
     padding: 10px; 
     text-align: center; 
     color: white; 
     min-height:20px; 
} 

Answer 3

您可以用break-inside屬性做到這一點。

ul { 
 
    -webkit-columns: 4; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-columns: 4; 
 
    /* Firefox */ 
 
    columns: 4; 
 
    display: block; 
 
    list-style: none; 
 
     
 

 
    } 
 
    
 
    ul li { 
 
    margin: 20px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    color: white; 
 
    min-height: 50px; 
 
    display: list-element; 
 
    -webkit-column-break-inside:avoid; 
 
    -moz-column-break-inside:avoid; 
 
    -o-column-break-inside:avoid; 
 
    -ms-column-break-inside:avoid; 
 
     column-break-inside:avoid; 
 
    }

<ul> 
 
    <li style="background-color: rgb(51, 70, 115);">1</li> 
 
    <li style="background-color: rgb(121, 159, 59);">2</li> 
 
    <li style="background-color: rgb(133, 50, 104);">3</li> 
 
    <li style="background-color: rgb(75, 93, 135);">4</li> 
 
    <li style="background-color: rgb(151, 187, 93);">5</li> 
 
    <li style="background-color: rgb(156, 78, 129);">6</li> 
 
</ul>

Answer 4

下面是其他替代使用JS和Flexbox的你的方法。首先將每個4 li元素與wrapper元素分組，然後使用flexbox創建4列布局。

$('ul').each(function(){ 
 
    var divs = $('li', this); 
 
    console.log(divs) 
 
    console.log(divs.slice(0,4)); 
 
    for(var i = 0; i < divs.length; i+=4) { 
 
     console.log(i) 
 
     divs.slice(i, i+4).wrapAll('<li class="wrapper"><ul></ul></li>'); 
 
    } 
 
});

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
    
 
.wrapper ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.wrapper ul li { 
 
    flex: 1; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    color: white; 
 
    min-height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li style="background-color: rgb(51, 70, 115);">1</li> 
 
    <li style="background-color: rgb(121, 159, 59);">2</li> 
 
    <li style="background-color: rgb(133, 50, 104);">3</li> 
 
    <li style="background-color: rgb(75, 93, 135);">4</li> 
 
    <li style="background-color: rgb(151, 187, 93);">5</li> 
 
    <li style="background-color: rgb(156, 78, 129);">6</li> 
 
    <li style="background-color: rgb(75, 93, 135);">4</li> 
 
    <li style="background-color: rgb(151, 187, 93);">5</li> 
 
    <li style="background-color: rgb(156, 78, 129);">6</li> 
 
    <li style="background-color: rgb(51, 70, 115);">1</li> 
 
    <li style="background-color: rgb(121, 159, 59);">2</li> 
 
    <li style="background-color: rgb(133, 50, 104);">3</li> 
 
    <li style="background-color: rgb(75, 93, 135);">4</li> 
 
    <li style="background-color: rgb(151, 187, 93);">5</li> 
 
    <li style="background-color: rgb(156, 78, 129);">6</li> 
 
    <li style="background-color: rgb(75, 93, 135);">4</li> 
 
</ul>