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

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>