水平列表元素均匀分布且响应迅速

Question

我正在创建一个包含图像和文本的无序列表，并且希望每个项目的宽度为宽度的 1/3，并带有边距，并且间隔均匀。我不知道如何确保在响应式网站中，项目总是正好是宽度的 1/3，包括边距。各个浏览器的百分比似乎并不一致。

HTML

<ul>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
</ul>

CSS

ul {list-style:none; text-align:center; margin:0;}
ul li {display:inline-block; zoom:1; *display:inline; vertical-align:top; width:32%; margin:10px 1%;}

如果我想要两行三列，有时它看起来不错，而其他时候将第三项向下推到下一行——几乎就像某些浏览器在某处添加一两个像素一样。是否有 CSS 可用于将其均匀地分布在父元素的整个宽度上？

请注意，该网站是响应式的，因此无法计算精确的像素。如果可能的话，我也宁愿避免为不同的浏览器编写单独的 CSS。

Answer 1

有几种方法可以解决这个问题，但最简单的 CSS 解决方案是对 li 元素使用内联块。现在 inline-block 的问题是，它们会考虑空格，破坏你的布局，但是在标记中有两个简单的解决方案：

1. li 元素之间的 HTML cmets；
2. 压缩的 HTML 代码。

HTML cmets 示例：

<ul>
    <li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li>
</ul>

压缩 HTML 示例：

<ul><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li></ul>

对于 CSS，这应该可以解决问题（您可以在媒体查询中修改“列”的宽度）。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

  li {
    display: inline-block;
    width: 50%;
  }

@media screen and (min-width: 20em) {

  li {
    width: 33.33333%;
  }

}

另外需要注意的是，您不能在这些项目的左侧和右侧使用边距，因为它们不会成为原始宽度的一部分，但您可以在内部使用填充将元素“隔开”。这也是一些响应式网格系统的构建方式（稍微高级一点，但原理相同）。

这是实时代码：http://codepen.io/TheDutchCoder/pen/zxxwom