html - CSS 内联 block 列表网格

Question

我有一个元素列表，我想以类似网格的方式显示这些元素。我希望每个元素都有一个自定义宽度，基于它的内容加上它周围的填充。所以我只是添加了适当的样式，并为每个li添加了一个inline-block的显示。但问题是我希望网格与其容器的边缘成正方形。所以我希望每行的最后一个列表项扩展以填充该行剩余的宽度。我该怎么做？

这是我得到的一个 fiddle :http://jsfiddle.net/Lk0e028c/

HTML:

<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>Vestibulum</li>
    <li>porttitor</li>
    <li>nisi</li>
    <li>purus</li>
    <li>eu</li>
    <li>pretium</li>
    <li>ipsum</li>
    <li>ultricies</li>
    <li>eu</li>
    <li>Nulla</li>
    <li>eleifend</li>
    <li>arcu</li>
    <li>dolor</li>
    <li>et</li>
    <li>vestibulum</li>
    <li>ligula</li>
    <li>lacinia</li>
    <li>sed</li>
    <li>Sed</li>
    <li>viverra</li>
    <li>tortor</li>
    <li>lorem</li>
    <li>molestie</li>
    <li>volutpat</li>
    <li>nisi</li>
    <li>volutpat</li>
    <li>a</li>
    <li>Suspendisse</li>
    <li>dolor</li>
    <li>lacus</li>
    <li>ultrices</li>
</ul>

CSS:

ul {
    list-style: none;
    padding-left: 0;
    width: 300px;
}

ul li {
    background: #ccc;
    display: inline-block;
    padding: 15px;
    margin-left: -3px;
    margin-bottom: 1px;
}

ul li:hover {
    background: #ddd;
}

Answer 1

你可以使用 flexbox:

ul {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
ul li {
  flex-grow: 1; /* Grow to fill available space */
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  width: 300px;
}
ul li {
  flex-grow: 1;
  background: #ccc;
  padding: 15px;
  margin-right: 1px;
  margin-bottom: 1px;
  text-align: center;
}
ul li:hover {
  background: #ddd;
}

<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>Vestibulum</li>
    <li>porttitor</li>
    <li>nisi</li>
    <li>purus</li>
    <li>eu</li>
    <li>pretium</li>
    <li>ipsum</li>
    <li>ultricies</li>
    <li>eu</li>
    <li>Nulla</li>
    <li>eleifend</li>
    <li>arcu</li>
    <li>dolor</li>
    <li>et</li>
    <li>vestibulum</li>
    <li>ligula</li>
    <li>lacinia</li>
    <li>sed</li>
    <li>Sed</li>
    <li>viverra</li>
    <li>tortor</li>
    <li>lorem</li>
    <li>molestie</li>
    <li>volutpat</li>
    <li>nisi</li>
    <li>volutpat</li>
    <li>a</li>
    <li>Suspendisse</li>
    <li>dolor</li>
    <li>lacus</li>
    <li>ultrices</li>
</ul>