Question

在线的一切都指向我停止使用表格，我已经尽力做了，但我遇到了一个问题，哪些表格似乎是唯一的解决方案。我有5个内嵌块元素，我想要在页面宽度的100％上均匀间隔。我在样式上放置了20％的宽度，并将边距和填充设置为零。当我查看页面时，除了添加到页面的水平滚动条之外，一切看起来都很不错。如果我将这些元素放在具有5列的100％宽度表中，这不是问题。在这种情况下，我需要使用表格还是有更好的解决方案？

顺便说一下，我在Chrome和IE8中都试过这个。

更新：我发现的东西是我的元素之间插入了一个~5px的间隙（通过在它们上面加上背景颜色找到）。我不知道为什么，因为我的风格中没有任何东西表示这一点：

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

.links { 白色空间：nowrap; 宽度：100％; }

.links a { display：inline-block; 宽度：20％; 填充：0; 保证金：0; 白颜色; background-color：＃4C8331; }

另一个更新：

在JMC Creative指出我在几乎解决问题的锚点之间放置空格的愚蠢错误，但现在有一个滚动条像素。我认为没有任何继承的风格应该导致这种情况。

Answer 1

尝试将它们放入容器中。像这样：

#container {
    margin: 0;
    padding: 0;
    width: 100%;
}

#boxes {
    float: left;
    width: 20%;
}

Answer 2

你的html标记在a标签之间有一个空格。因此，它被渲染为5个块，20％宽，4个空间，每个大约4px。所以最终得到100％+ 16px。

修改

为了解决在IE中困扰你的滚动条，你可以像这样设置一个条件评论：

<!--[if IE]>
<style type="text/css"> .links { overflow: hidden; } </style>
<![endif]-->

Answer 3

确保您的正文和html设置为margin: 0; padding: 0;。

Answer 4

您是否尝试过使用overflow：hidden？或者更具体地说是overflow-y：hidden？

Answer 5

你想漂浮你的锚。这样做works for me。

CSS：

.links {
    width: 100%;
}

.links>a {
    float: left;   
    display: inline-block;
    width: 20%;
    padding: 0;
    margin: 0;
    color: #fff;
    background-color: #4C8331;
}

HTML：

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

如果页面上没有足够的空间（即内容溢出宽度），您可能会看到一个滚动条或看到一些包裹在另一条线上的锚点。我会注意到，我已经看到IE得到了这个错误，错误地包装它不应该。这似乎是一个四舍五入的问题，可以解决。

CSS流体布局没有表格

5 个答案:

修改