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元素使用内联块。现在内联块的问题是，它们会考虑空格，破坏你的布局，但在标记中有两个简单的解决方案：

li元素之间的HTML注释;
压缩的HTML代码。

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>

压缩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

Answer 2

这是一个跨浏览器的解决方案。如果您需要在列表中包含图像，我已添加了html5结构。

＆＃13;

/* the two following properties modify the box-model so that padding is removed from the width instead of being added */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul:after { /* to clearfix your ul list */
  content: "";
  display: table;
  clear: both;
}
ul li {
  display: block; /* inline-block have an extra 4px margin wich makes it harder to use in this situation */
  width: 33.3333333%; /* You get it (100/3) but use exact number */
  padding: 10px 5px;
  float: left; /* if you use block elements you have to float them */
  text-align: center;
}
figure {
  margin: 0; /* to normalize figure element */
}
figure img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<ul>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
 
</ul>

＆＃13;

Answer 3

试试这个：http://jsfiddle.net/j13889cx/

我添加了一个div元素，将所有内容包含在名为li的每个.ul-wrap元素中。

这允许您添加任何您想要的边距/填充，因为.ul-wrap是一个块元素。

尝试更改.ul-wrap的边距或填充。

水平列表元素均匀间隔和响应

3 个答案: