1

我正在网站中显示标签列表。这就是它现在的显示方式

在此处输入图像描述

我创建了一个 JSFiddle，请检查。

现在标签左对齐，我需要将标签对齐到中心。尝试添加text-align: center;到.tags类，但它没有使标签居中。

这是我的 HTML 和 CSS 代码

HTML

<div class="tags">
    <ul>
        <li><a href="">tag 0000000</a></li>
        <li><a href="">tag 1111111111111</a></li>
        ...
    </ul>
</div>​

CSS

.tags
{
    display:table;
}

.tags li
{
    float:left;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0 0 0;
}

.tags ul a
{
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}

我需要在一行中显示尽可能多的标签，但行的内容必须居中对齐。

4

3 回答 3

2

http://jsfiddle.net/hxbB9/18/ 另一个不需要在.tagsdiv上设置宽度的替代解决方案

.tags
{

}

.tags li
{ 
    display:inline-block;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0 0 0;
}

.tags ul a
{
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}

.tags ul
{
    text-align:center;    
}
于 2012-07-03T16:10:41.373 回答
1

我相信这就是您正在寻找的：

.tags ul
{
    text-align: center;
    list-style-type: none;
}
.tags ul li {
    display: inline-block;
}
.tags ul a
{
    display: inline-block;
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}
于 2012-07-03T16:13:58.423 回答
0

http://jsfiddle.net/hxbB9/6/

这是你要找的吗？

于 2012-07-03T16:07:52.923 回答