如何在包装时使列表项在网格上排列？

假设我

在响应式设计中使用以下内容:

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

  

    MenuItemHeinz
  
  

    MenuItemHinrich
  
  

    MenuItemRoffen
  
  

    MenuItemStaffRoffeltack
  
  

    MenuItemHeinz
  

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



如何让菜单项在打破时很好地排列在网格上,例如像这样？最好只使用css ...当然;)





1> Michael_B..：

---

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

  
item
  
item
  
item
  
item
  
item
  
item
  
item
  
item
  
item
  
item
  
item