在包装时，如何使列表项在网格中对齐?

Say I have the following <ul> for use in a responsive design:

假设我有以下的

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

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

When I resize the browser window or look at the page in a phone it breaks like this:

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

How can I make the menu items instead line up nicely on a grid when they break, for example like this? Preferably only using css ... of course ;)

例如，当菜单项中断时，我如何使它们在网格上整齐地排列?最好只使用css…当然,)

2 个解决方案

#1

This layout is relatively simple with CSS flexbox.

使用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

jsFiddle演示

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

浏览器支持:除IE < 10外，所有主要浏览器都支持Flexbox。一些最近的浏览器版本，如Safari 8和IE10，需要厂商的前缀。要快速添加前缀，请使用Autoprefixer。更多细节在这个答案。

#2

You could use css columns and a media query.

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

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;
  }
}

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

#1