CSS 内联块列表网格

CSS inline-block list grid

我有一个项目列表，我想以类似网格的方式显示这些项目。我希望每个项目都有一个自定义宽度，基于它的内容加上它周围的填充。所以我只是添加了适当的样式，并为每个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;
}

我认为仅 CSS 的解决方案很难达到结果。

我会研究 javascript 解决方案来重新计算块宽度并相应地对齐它们。这对确保响应能力也很有帮助。

您可能需要查看 wookmark

一个简单的解决方案是为 li 定义一个宽度：

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

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

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>

这是我在两分钟内能得到的最接近结果：

我提供什么

ul {
    background: #ccc url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAYAAAAbb8MkAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wUbER07M8cXywAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGklEQVQI12M4c+bMfyYGBgaGkUEw/P///z8AbfkHvv+4euUAAAAASUVORK5CYII=') repeat 0 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 300px;
    font-size: 0;
}

ul li {
    border-width: 0 0 1px 1px;
    border-color: #fff;
    border-style: solid;
    display: inline-block;
    padding: 15px;
    font-size: 1rem;
}

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>

http://jsfiddle.net/Lk0e028c/3/

遗留问题

  1. 将鼠标悬停在每行的最后一项会揭示这种视觉效果的伪造方式
  2. 如果最后一个项目在它的行中是单独的，背景仍然延伸到 <ul> 的全部。

我是怎么做到的？

第 1 步

我将背景颜色从列表项移到了它们的父级 ul:

ul { 
    background: #ccc;
    ...
}

第 2 步

我在列表项的左侧和底部设置了 1px 的白色边框：

ul li {
    border-width: 0 0 1px 1px;
    border-color: #fff;
    border-style: solid;
    ...
}

步骤 3

由于每行项目下方的白线将拒绝延伸到 <ul> 的右端，因此我创建了一个 1px 宽的背景图像并将其转换为 base64，以便我可以内联使用它：

http://www.base64-image.de/step-1.php

图像底部有 一个 白色像素。你在这里看不到它，因为它显然与 SO 的白色背景色融为一体。

第 4 步

将此图像作为 url 添加到 <ul> 的 background 属性 并使其成为 repeat，从 0 0 开始： 

background: #ccc url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAYAAAAbb8MkAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wUbER07M8cXywAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGklEQVQI12M4c+bMfyYGBgaGkUEw/P///z8AbfkHvv+4euUAAAAASUVORK5CYII=') repeat 0 0;

完成！

你可以使用 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>