我们有一个无序列表,最多可以显示10个项目。我们如何设置列表,使其将前五个项目放在左侧,并将后五个项目放入下一列(平均拆分)?
这是电流和期望输出。我们试图使用CSS Flexbox,但找不到方法。如果flexbox无法完成,请接受其他想法。
这是当前的结果和期望的输出。
ul {
display: flex;
flex-direction: column;
flex: 0 1 auto;
}
<div>
<ul>
<li>Assertively mesh</li>
<li>client-centered</li>
<li>niches and covalent networks</li>
<li>Uniquely e-enable</li>
<li>team driven benefits</li>
<li>rather than exceptional</li>
<li>architectures Continually</li>
<li>foster cutting-edge</li>
<li>open-source core</li>
<li>process-centric</li>
</ul>
</div>
最佳答案
我将使用css列:
ul {columns: 2;}
li {list-style-position: inside;}
<ul>
<li>Assertively mesh</li>
<li>client-centered</li>
<li>niches and covalent networks</li>
<li>Uniquely e-enable</li>
<li>team driven benefits</li>
<li>rather than exceptional</li>
<li>architectures Continually</li>
<li>foster cutting-edge</li>
<li>open-source core</li>
<li>process-centric</li>
</ul>
请注意,“display:grid”有pretty bad browser support,而columns(和flexbox)score better。