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

Posted 2023-03-07

【中文标题】包装时如何使列表项在网格上排列？

【英文标题】：How can I make list items line up on a grid when wrapping?

【发布时间】：2016-03-22 00:20:10

【问题描述】：

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

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

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

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

我怎样才能让菜单项在它们中断时在网格上很好地排列，例如像这样？最好只使用css ...当然;）

【参考方案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

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

【讨论】：

更多超级答案，感谢您编辑我的帖子。你拯救了我的一天。

【参考方案2】：

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

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>

【讨论】：

超级答案，我已经部署了它。但我希望找到一种方法使列表仍然从左到右，跨列，而不是在行上和下。