0

我试图让我的标签列表显示在行中，但我似乎无法做到。

这是我的 CSS 代码：

.tags{
    list-style-type: none;
}
.tags li:first-child:before {
    content: "Tags:\0000a0";
    font-style: normal;
    font-weight: bold;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-size: 10px;
    color: #7d7d7d;
}
.tags ul li a {
    border-bottom: none;
    background: rgba(239, 177, 113, .4);
    color: #000000;
    padding: 2px 6px;
    margin: 0 4px 4px 0;
    display: inline-block;
    *zoom: 1;
}
.tags ul li a:hover {
    background: rgba(239, 177, 113, .8);
}

HTML：

<ul class="tags">
    <li>Themes</li>
    <li>Code</li>
    <li>Tumblr</li>
</ul>

我还制作了这个 jsfiddle： http: //jsfiddle.net/5Sqkk/（rgba 代码似乎在 jsfiddle 中不起作用——尽管它在我的实际站点上运行良好）。

提前感谢您提供的任何帮助！

4

2 回答 2

2

添加display:inline到li 

.tags li{
    display:inline
}

演示

或者

你的css中的问题是你这样指向.tags ul li a是错误的，因为html中没有标签，而.tags是ul本身的类，所以你不需要写.tags ul，让它像.tags li它一样工作

演示 2 更新

于 2013-06-04T12:27:36.837 回答
1

使用ul.tags与不使用.tags ul

这里的例子：http: //jsfiddle.net/5Sqkk/3/

并且display: inline-block必须在li标签上

ul.tags li {
    display: inline-block;
}
于 2013-06-04T12:30:21.537 回答