html - 网格无法正常工作

Question

我想用网格系统做一个网站。 (我已经做了一个，所以我知道/知道它是如何工作的)

这是我的自定义网格:http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15

现在问题来了:当我尝试将 prefix_1 作为一个类时，什么也没有发生，它只是停留在同一个地方。我有一个 prefix_1 grid_3 和一个 grid_4。所以是1+3+4=8。我的网格有 8 列宽，所以它必须很容易地组合在一起，但事实并非如此。 http://jsfiddle.net/gekkeabt/5LA82/

<div class="container_8">
<span id="download" class="prefix_1 grid_3"><a href="#"><b>Download</b> Leasy CMS</a></span>
<span id="download" class="grid_4"><a href="#"><b>Download</b> Macha Webserver</a></span>
<span id="about" class="prefix_2 grid_4 suffix_2"><a href="#"><b>About</b> Me</a></span>
</div>

我检查了我的代码 100 次。但是我找不到哪里出错了。

也许有人可以帮帮我？

谢谢!

编辑:我通过在跨度之外的另一个 div 中定义类来解决前缀和后缀问题。所以它看起来像:

<div class="prefix_1 grid_3"><span id="download">The content....</span></div>

Answer 1

尝试删除

padding:10px 50px 10px 50px;

#download,#about CSS 声明中的行(或至少水平填充 2 x 50 像素)。

正是这种额外的填充使元素比一行更宽。

这是没有该行的样子:http://jsfiddle.net/WHG4u/