Html 防止列表项填充在水平列表中换行

我试图制作一个水平无序列表，每行有四列。
列表项的数量是动态的，在运行时可能会发生变化

当前代码和结果

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;
} 

这就给了我：

列表并不是水平的，因为第二个元素（绿色）在第一个元素（蓝色）的下面和旁边，但是顺序在我的例子中并不重要

问题是元素的填充将换行到下一列

有什么建议吗

---

jsiddle:

您可以将

最小高度

添加到

，它可能会解决您的问题：-

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

您可以对该属性执行此操作

ul{
-webkit栏目：4个；
/*铬、狩猎、歌剧*/
-moz列：4列；
/*火狐*/
栏目：4个；
显示：块；
列表样式：无；
}
ulli{
利润率：20px；
填充：10px；
文本对齐：居中；
颜色：白色；
最小高度：50px；
显示：列表元素；
-webkit列内部中断：避免；
-莫兹柱内折：避免；
-o-柱-内部破裂：避免；
-ms柱内折：避免；
内柱断裂：避免；
}

背景色：rgb（51、70、115）>1
背景色：rgb（121、159、59）“>2
背景色：rgb（133、50、104）>3
背景色：rgb（75,93,135）>4
背景色：rgb（15118793）>5
背景色：rgb（156、78、129）>6

试试下面的代码

<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;
}

背景色：rgb（51、70、115）>1
背景色：rgb（156、78、129）>2
背景色：rgb（121、159、59）“>3
4
背景色：rgb（51、70、115）>5
背景色：rgb（121、159、59）“>6
背景色：rgb（156、78、129）>7
背景色：rgb（156、78、129）>8

#名单{
-webkit列数：4；
-moz列数：4；
列计数：4；/*3只是占位符——可以是任何内容*/
}
#李列表{
显示：内联块；
边缘底部：20px；
填充：10px 80px；
}

这里是使用JS和Flexbox的方法的另一种替代方法。首先将每个4个

li

元素与

wrapper

元素分组，然后使用flexbox创建4列布局

$（'ul'）。每个（函数（）{
var divs=$（'li'，本）；
console.log（divs）
控制台日志（分区切片（0,4））；
对于（变量i=0；i
）；
}
});
ul{
填充：0；
保证金：0；
}
包装纸{
显示器：flex；
弯曲方向：行；
}
李先生{
弹性：1；
利润率：10px；
填充：10px；
颜色：白色；
最小高度：50px；
}


背景色：rgb（51、70、115）>1
背景色：rgb（121、159、59）“>2
背景色：rgb（133、50、104）>3
背景色：rgb（75,93,135）>4
背景色：rgb（15118793）>5
背景色：rgb（156、78、129）>6
背景色：rgb（75,93,135）>4
背景色：rgb（15118793）>5
背景色：rgb（156、78、129）>6
背景色：rgb（51、70、115）>1
背景色：rgb（121、159、59）“>2
背景色：rgb（133、50、104）>3
背景色：rgb（75,93,135）>4
背景色：rgb（15118793）>5
背景色：rgb（156、78、129）>6
背景色：rgb（75,93,135）>4
我想我犯了一个小错误。这个解决方案行不通，它只会使列中的两项都变大。它不会将一个项目推到下一列。如果JSFIDLE中包含html，那就太好了。@Paran0a，这就是为什么你要使用
列
，首先，支持太糟糕了？@Paran0a，你可能需要重新运行这么好的程序！，但它正在生成三列而不是四列。不管怎样？谢谢，但结果与前面的答案相同，三列，而不是四列。每行四列。问题是我不能添加span元素，HTML是从服务器生成的。解决方案很好，但我不能更改HTML结构，必须稍后解析。不过非常感谢你