我们有一个无序列表,最多可以显示10个项目。我们如何设置列表,使其将前五个项目放在左侧,并将后五个项目放入下一列(平均拆分)?
这是电流和期望输出。我们试图使用CSS Flexbox,但找不到方法。如果flexbox无法完成,请接受其他想法。
这是当前的结果和期望的输出。
html - 如何在5个元素后包装列表?-LMLPHP

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

10-05 20:44
查看更多