水平列表元素均匀间隔和响应 [英] Horizontal list element evenly spaced and responsive

问题描述

我正在创建一个包含图像和文本的无序列表，并且希望每个项目的宽度都是边距的1/3，且间距均匀。我无法弄清楚如何确保在一个响应式网站中，这些项目总是正好是宽度的三分之一，包括边距。百分比在各浏览器中似乎不会保持一致。

I am creating an unordered list that contains images and text, and would like each item to be 1/3rd the width with a margin, evenly spaced. I can't figure out how to ensure, in a responsive website, the items are always exactly 1/3rd the width, including margins. Percentages seem to not remain consistent across browsers.

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，我可以用它来均匀地分布在父元素的整个宽度？

If I want two rows of three columns here, it will sometimes look fine and other times push the third item down to the next row--almost as if some browsers are adding a pixel or two somewhere. Is there CSS that I can use to just space it evenly across the entire width of the parent element?

请注意，该网站是响应，所以计算确切的像素不会上班。如果可能的话，我宁愿避免为不同的浏览器编写单独的CSS。

Note that the site is responsive so calculating exact pixels isn't going to work. I'd also rather avoid writing separate CSS for different browsers, if possible.

推荐答案

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

There's a couple of ways to tackle this, but the easiest CSS solution is to use inline-blocks for the li elements. Now the issue with inline-block is, they will take whitespace into account, breaking your layout, but there are two easy solutions for this in the markup:

1. li 元素之间的HTML注释


2. 压缩的HTML代码

1. HTML comments between the li elements;
2. Compressed HTML code.

HTML注释示例：

Example with HTML comments:

<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，这应该可以做到这一点（你可以修改'columns'的宽度媒体查询）。

For the CSS, this should do the trick (you can modify the width of the 'columns' in media queries).

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%;
  }

}

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

Another thing to note is that you can't use margins on the left and right of these items, as they will not be part of the original width, but you can use padding on the inside to "space" elements apart. This is also how some of the repsonsive grid systems are built (a little more advanced, but same principle).

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

这篇关于水平列表元素均匀间隔和响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！