使用CSS构建Div
使用CSS构建Div
提问于 2011-10-04 10:07:11
我正在尝试格式化一些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包装在链接块周围，如果我将每个链接包装在单独的div中并删除display: block，它会将它们显示为每个链接的适当宽度，并且每个链接都在新的一行上，唯一的问题是页边距不能让我在顶部和底部隔开它们。
我相信对于更了解css的人来说，这是一个简单的修复
jsbin.com link
谢谢你的帮助
期望的最终结果就像这样..。
当添加float: left; clear: both;时，它使我的其他div显示在它下面，如下所示...
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-10-04 10:12:06
这些最简单的方法是添加一个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/
注意：我鼓励您使用更好的标记，比如无序列表。它不仅更具语义性，而且允许更好的钩子，并避免使用浮动。
更新
根据上面的评论和我的注释，下面是代码：http://jsfiddle.net/84g6Q/1/
Stack Overflow用户
发布于 2011-10-04 10:14:27
将display: block;替换为：
float: left;
clear: both;应该行得通。
Stack Overflow用户
发布于 2011-10-04 10:23:01
您可以通过将其设置为列表并将锚点标记的显示更改为inline-block：http://jsfiddle.net/hZLzZ/来避免使用浮动和清除
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7642601
复制相关文章
相似问题
腾讯云开发者
