css - 使用 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>

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

我敢肯定，对于了解更多 CSS 的人来说，这是一个简单的修复

jsbin.com link

感谢您的帮助

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

添加时float: left; clear: both; 它让我的其他 div 像这样显示在它下面...

Answer 1

这些最简单的事情就是添加一个 float 属性。这本质上是 收缩包装 元素。我还添加了一个 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/

注意:我鼓励您使用更好的标记，例如无序列表。它不仅更语义化，而且允许更好的钩子(Hook)并避免使用 float 。

更新

根据上面的评论和我的注释，代码如下:http://jsfiddle.net/84g6Q/1/