Question

我正在尝试创建一些均匀间隔的列（ol），列本身是固定宽度。

到目前为止，我已经设法通过使用table布局，并在列表项中嵌套了一个额外的元素来实现所需的效果。

HTML：

<ol>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ol>

CSS：

ol {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
}

div {
    margin: 0 auto;
    width: 100px;
    height: 250px;
}

这works great，但有以下两个缺点：

尽可能see in the demo，第一个＆amp;最后一列不与父母的外边缘齐平。
这不能真正用于响应。您可以在较小宽度处做的唯一事情是stack them，但我想将它们分开（每行2或3个）。

单独使用CSS后我甚至可以使用它吗？我知道在JS中有很多方法可以实现这一点，但我只是在使用CSS解决方案。

P.S。我不关心IE7-但我确实需要支持IE8。 CSS3选择器是可以的，因为我无论如何在项目中使用selectivizr（我知道这是JS; - ））。

Answer 1

回收"how to *really* justify a horizontal menu"似乎合适。基本上，您所描述的行为是应用了text-align:justify的相同宽度的内联块元素：

ol {
  /*force the desired behaviour*/
  text-align: justify;
  /*remove the minimum gap between columns caused by whitespace*/
  font-size: 0;
}

li {
  /*make text-align property applicable*/
  display: inline;
}

/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 250px;
}

Working fiddle

注意：您可能需要将所需的font-size和text-align重新应用于ol的后代，具体取决于您使用的重置（即防止这些属性被继承）

Answer 2

好的，我首先想到的是使用媒体查询来获得一个响应式方法，以便在不同的屏幕尺寸上每行显示多少，而我的第二个将是使用

     box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

这将停止您稍后添加到盒子模型大小上的填充。

希望这接近你所追求的目标。

均匀间隔的固定宽度列 - 在响应设置中

2 个答案: