CSS-如何在UL LI的第二列继续使用大型LI

我有下面的CSS，它工作得很好。然而，我有大约50里。是否有一种方法可以自动添加列并显示每列10个？我试着左：浮动；但是看起来很难看。我尝试了列计数：3，列间距：10px，但对li没有影响（只是更改ul的宽度）

如果有帮助的话，我在JSFIDLE上有html和css

---

使用flexbox怎么样

#cssmenu ul {
  display: flex;
  flex-wrap: wrap;
}

#cssmenu ul li {
  flex: 1 0 25%;
}

维维海德尔女士
{
显示：无；
}
WPHeader女士
{
背景：#93BBE4！重要；
}
WPTitle女士
{
字体系列：Verdana、Tahoma、无衬线；
字体大小：14px！重要；
颜色：#fffef9；
字体大小：粗体！重要；
}
.ms WPTitle A:链接.ms WPTitle A:已访问
{
颜色：#fffef9；
文字装饰：无；
光标：手；
}
#cssmenu{
填充：0；
保证金：0；
边界：0；
位置：相对位置；
z指数：1；
垫底：25px；
字体系列：Verdana、Tahoma、无衬线；
}
#cssmenu ul，
#cssmenu ul li，
#cssmenu ul，
#cssmenu ul{
列表样式：无；
保证金：0；
填充：0；
边界：0；
}
#cssmenu ul{
位置：相对位置；
z指数：397；
}
#cssmenu ul li{
最小高度：1px；
线高：1米；
垂直对齐：中间对齐；
}
#cssmenu ul{
显示器：flex；
柔性包装：包装；
}
#cssmenu ul li{
弹性：1025%；
}
#cssmenu ul li：悬停{
位置：相对位置；
//z指数：99；
游标：默认值；
}
#cssmenu ul{
可见性：隐藏；
位置：绝对位置；
最高：100%；
左：0；
/*z指数：398*/
宽度：100%；
}
#cssmenu ul{
顶部：0px；
左：99%；
}
#cssmenu ul li：悬停>ul{
能见度：可见；
宽度：170px；
}
#cssmenu ul{
底部：0px；
左：0；
}
/*自定义CSS样式*/
#cssmenu ul{
宽度：100px；
}
#cssmenu ul{
宽度：167px；
}
#cssmenu ul li{
填充：7px 7px；
颜色：#000000；
背景色：#cce5ff；
//背景色：#FFF；
//边框：1px纯红；
边框底部：1px实心#f1f5f9；
}
#cssmenu ul li：悬停{
背景：#cce5ff；
颜色：#000；
盒影：1px 1px 10px 2px#888；
}
#cssmenu ul a：链接，
#cssmenu ul a：已访问{
颜色：#000；
文字装饰：无；
}
#cssmenu ul a：悬停{
颜色：#000；
}
#cssmenu ul a：激活{
颜色：#ffa500；
}
#cssmenu ul li a：链接，
#cssmenu ul li a：访问{
/*颜色：#FFFFFF；
大纲：无！重要*/
}
#cssmenu ul li a img{
/*颜色：#FFFFFF；
大纲：无！重要*/
}

选择国家



































有用的链接









政策






工具和资源

这需要在哪些浏览器和浏览器版本中工作？IE 11是我们公司的默认浏览器，但它们也允许使用chrome和移动设备（主要是iPad）。您能提供一个演示该问题的浏览器吗？如果我把你的css放在一把小提琴上，并为列添加一个规则-这里：-它在所有浏览器中都非常有效。我说的是所有浏览器，但我这里没有Edge或Safari。李斯特先生：我更新了帖子并添加了带有html和css的JSFIDLE。谢谢你的解决方案。排序可以是第一列显示A到L，第二列显示其余的M到Z吗

#cssmenu ul {
  display: flex;
  flex-wrap: wrap;
}

#cssmenu ul li {
  flex: 1 0 25%;
}