菜单条目平均分布在两行答案

【问题标题】：Menu entries equally spread over two lines菜单条目平均分布在两行
【发布时间】：2018-02-26 19:10:36
【问题描述】：

我有一个菜单（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;
}

谢谢。

【问题讨论】：

试试THIS。

标签： html css layout word-wrap

【解决方案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>

【讨论】：

谢谢，但这不是我想要的。菜单应该超过两行并且行应该平衡。
你能把你的 html 和 css 放在这里，让我知道你想要什么吗？
这里是：我在问题中添加了我的 HTML 和 CSS
我认为，只需添加一些固定宽度就可以了。尝试添加宽度：150px；到班级。它看起来像你想要的。当然，它不是可扩展的解决方案。
谢谢，这是一个解决方案，但它确实不可扩展。