在中间打破响应列表

Question

我有一个响应式菜单，列为无序列表。在更大的尺寸，它是内联的，看起来不错： 但随着窗户缩小，它会断裂并且看起来很尴尬： 理想情况下，我希望它在溢出时均匀分成两半，如下所示： 在列表中使用<wbr>似乎没有做任何事情，而且我没有想法。 This question/solution，建议使用inline-block，适用于段落，但似乎不适用于列表。

这是一个CodePen示例，演示了突破性问题：
http://codepen.io/anon/pen/xVoLov?editors=1100

Answer 1

您可以将媒体查询的宽度更改为每个33%

的li

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#wrapper {
  width: 90%;
  max-width: 700px;
  margin: 30px auto;
  padding: 30px;
  border: 1px solid black;
  overflow: hidden;
  text-align: center;
}
li {
  float: left;
  padding: 0 1em;
}
@media screen and (max-width: 768px) {
  li {
    width: 33%;
  }
}
@media screen and (max-width: 480px) {
  li  {
    width: 50%;
  }
}

＆＃13;

<div id="wrapper">
  <ul>
    <li>Thing One</li>
    <li>Thing Two</li>
    <li>Thing Three</li>
    <!-- ideally, break here -->
    <li>Thing Four</li>
    <li>Thing Five</li>
    <li>Thing Six</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试使用display：flex。

这是一篇很棒的文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox很棒但是旧版浏览器（Internet Explorer ...）存在问题。您可以在此处查看兼容性：http://caniuse.com/#feat=flexbox