菜单条目均匀分布在两行中

Question

我有一个菜单（ul标签），其元素是内联的。现在，元素在达到容器宽度时会换行：

这就是我想强制菜单分为两行：

如果添加了额外的条目，我希望菜单在两行上平分：

我理想的是只想用css来做这件事。我尝试使用flexbox和writing-direction而没有成功。我对一个javascript解决方案持开放态度，但希望有一个软的解决方案，允许在其他响应模式下使用不同的设计。

编辑：

这是我的HTML：

<ul class="main-menu">
  <li class="main-menu__entry"><a href="#">Le projet</a></li>
  <li class="main-menu__entry"><a href="#">Les numéros</a></li>
  <li class="main-menu__entry"><a href="#">Obtenir le magazine</a></li>
  <li class="main-menu__entry"><a href="#">Devenir coopérateur</a></li>
  <li class="main-menu__entry"><a href="#">Nous contacter</a></li>
  <li class="main-menu__entry"><a href="#">Proposer un sujet</a></li>
</ul>

和CSS（我简化了相关代码）

.main-menu__entry {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid gold;
  margin: 0 2px 2px 0;
  color: black;
}

感谢。

Answer 1

这是你在找什么？这绝对是一个可扩展的解决方案，但现在应该是有用的。

.main-menu__entry {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid gold;
  margin: 0 2px 2px 0;
  color: black;
  width: 150px;
}

<ul class="main-menu">
  <li class="main-menu__entry"><a href="#">Le projet</a></li>
  <li class="main-menu__entry"><a href="#">Les numéros</a></li>
  <li class="main-menu__entry"><a href="#">Obtenir le magazine</a></li>
  <li class="main-menu__entry"><a href="#">Devenir coopérateur</a></li>
  <li class="main-menu__entry"><a href="#">Nous contacter</a></li>
  <li class="main-menu__entry"><a href="#">Proposer un sujet</a></li>
</ul>