Question

我有一些愚蠢的CSS问题。不能让我的导航栏以我想要的方式工作。问题是，它以某种方式将箭头保持在锚文本下。

这是html的例子：

<ul id="navi">
    <li><a href="">abc</a></li>
    <li><a href="">def</a></li>
    <li><a href="">ghi</a></li>
</ul>

和样式表：

#navi {
    list-style: none;
    padding: 0.5em;
}
#navi li {
    float: left;
    display: inline;
    list-style-type: none;
}
#navi li a {
    display: block;
    font-weight: normal;
    font-size: 13px;
    color: #222;
    padding: 0.2em 1em;
    text-decoration: none;
}
#navi li a:hover, #navi li a:active {
    background: #5ea0ff;
    color: white;
    text-decoration: none;
}
#navi li a.selected {
    background: #444;
    color: white;
    text-decoration: none;
}
#navi li:after {
    content: "\25B6";
}
#navi li:last-of-type:after {
    content: "";
}

它的外观如下：http://jsfiddle.net/M2AHY/1/

我希望锚点之后的箭头，但我不能使用a：after（效果很好，但是用锚文本盘旋）

由于

Answer 1

这是因为箭头出现的元素，锚标记，用display:block设置样式 - 这个属性本身会将后续内容推送到新行。如果改变这个稍微不成问题，你可以用以下代码替换样式：

#navi li a {
    display: inline-block;
}

允许箭头出现在同一行。这是一个JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

编辑：或者，您可以将浮点数应用于锚标记。例如：

#navi li a {
    float:left;
}

这使您可以保留块显示，但也允许箭头出现在同一行上。

Answer 2

解决这个问题的一个简单方法是：

#navi li a:after {
    content: " \25B6";
}

请注意，我已经在内容之后添加了内容并在内容中添加了空格。希望有所帮助！

li：在水平导航栏后继续将其内容放在新行上

2 个答案: