Question

我想让我的标签列表显示在行中，但我似乎无法将它们制作成。

这是我的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 - 尽管它在我的实际网站上运行正常）。

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

Answer 1

将display:inline添加到li

.tags li{
    display:inline
}

<强> DEMO

或

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

<强> DEMO 2 Updated

Answer 2

使用ul.tags而非.tags ul

此处示例：http://jsfiddle.net/5Sqkk/3/

display: inline-block必须在li代码

上

ul.tags li {
    display: inline-block;
}

列表不显示内联

2 个答案: