用CSS构建Div

Question

我正在尝试使用某些css格式化链接列表，但我遇到了麻烦。

请看下面的图片......

<div class="tag-list">
    <a href="/tag/htaccess" >.htaccess</a>
    <a href="/tag/css-2" >css</a>
    <a href="/tag/database-2" >database</a>
    <a href="/tag/design-pattern">design pattern</a>
    <a href="/tag/mysql" >mysql</a>
    <a href="/tag/pdo" >PDO</a>
    <a href="/tag/php-2">php</a>
    <a href="/tag/server-2">server</a>
    <a href="/tag/web-design">web-design</a>
</div>

代码......

<style>
.tag-list a {

    color: #FFF; 
    text-transform: uppercase !important;
    background:#444;
    padding: 4px 6px 4px 6px;
    -moz-border-radius:3px;
    border-radius:3px;
    font:.8em Helvetica,Arial,sans-serif;
    margin: 1px 0px 0px 0px!important;
    display: block
}
</style>

我的目标是获得这样的LOOK链接列表，除了它们应该只是文本+填充的宽度而不是整个宽度。我已经尝试在div中包装每个链接，将div包围在上面的代码中的链接块周围，如果我将EACH链接包装在单独的div中并删除display: block它将显示为正确每个链接的宽度和每个链接的新宽度，唯一的问题是边距不起作用，让我将它们从顶部和底部分开。

我确信对于那些了解css

的人来说，这是一个简单的解决方法

jsbin.com link

感谢您的帮助

期望的最终结果是这样的......

添加float: left; clear: both;时，会让我的其他div显示在其下面......

Answer 1

这些最简单的事情是添加float属性。这基本上是 shrink包装元素。我还添加了一个clear属性来让它们堆叠。

.tag-list a {
    color: #FFF; 
    text-transform: uppercase !important;
    background:#444;
    padding: 4px 6px 4px 6px;
    -moz-border-radius:3px;
    border-radius:3px;
    font:.8em Helvetica,Arial,sans-serif;
    margin: 1px 0px 0px 0px!important;
    display: block;
    float: left;
    clear: both;
}

我相信这就是你想要的：http://jsfiddle.net/thnT8/

注意：我建议您使用更好的标记，例如无序列表。它不仅更具语义性，而且允许更好的钩子并避免使用浮动。

更新

根据上面的评论和我的注释，这里是代码：http://jsfiddle.net/84g6Q/1/

Answer 2

将display: block;替换为：

float: left;
clear: both;

应该工作。

Answer 3

您可以通过将其设置为列表并将锚标记的显示更改为内联块来避免使用浮动和清除：http://jsfiddle.net/hZLzZ/

Answer 4

您将显示设置为阻止，这意味着它将跨越整个容器。 只需删除display：block，浮动元素，添加clear:both以使它们堆叠，并将正确的填充设置为你想要的：。

这是使用您的代码：http://jsbin.com/ecoxay/2/edit