如何在换行时使列表项在网格上排列？

Question

假设我有以下<ul>用于响应式设计：

＆＃13;

＆＃13;

li {
  display: inline;
  padding-right: 1em;
}

＆＃13;

<ul>
  <li>
    MenuItemHeinz
  </li>
  <li>
    MenuItemHinrich
  </li>
  <li>
    MenuItemRoffen
  </li>
  <li>
    MenuItemStaffRoffeltack
  </li>
  <li>
    MenuItemHeinz
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

当我调整浏览器窗口大小或查看手机中的页面时，它会像这样断开：

如果这些菜单项在中断时很好地排列在网格上，例如像这样？最好只使用css ...当然;）

Answer 1

使用CSS flexbox，这种布局相对简单。

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding-left: 0;
}

ul li {
  flex: 0 0 calc(50% - 10px);
  margin: 5px;
  padding: 5px 0;
  text-align: center;
  box-sizing: border-box;
  border: 1px dashed red;
  background-color: yellow;
}

<ul>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
</ul>

jsFiddle demo

浏览器支持： 所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer。

中的更多详细信息

Answer 2

您可以使用css columns和媒体查询。

＆＃13;

＆＃13;

li {
  display: inline;
  padding-right: 1em;
}
@media(max-width: 680px) {
  ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  li {
    display:block;
  }
}

＆＃13;

<ul>
  <li>
    MenuItemHeinz
  </li>
  <li>
    MenuItemHinrich
  </li>
  <li>
    MenuItemRoffen
  </li>
  <li>
    MenuItemStaffRoffeltack
  </li>
  <li>
    MenuItemHeinz
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;