html - 如何将图像推到每个菜单项 block 的右侧

Question

我有以下内容:http://jsfiddle.net/86wj0qem/

代码如下:

HTML

<div id="subnav">
    <ul class="nav">
        <li> 
            <a href="#">Top menu thing useful</a>
        </li>
        <li>
            <a href="#">Second entry in the menu</a>
        </li>
        <li>
            <a href="#">Entry number 3</a>
        </li>
        <li>
            <a href="#">Menu 4 has sub menu!</a>
            <ul>
                <li>
                    <a href="#">As promised, menu 4.1</a>
                </li>
                <li>
                    <a href="#">The last menu option is 4.2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

* {
    line-height: 20px;
    border: 0;
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}
ul, li {
    list-style-type: none;
}
#subnav {
    float: left;
    width: 220px;
    height: 100%;
}
#subnav .nav {
    width: 215px;
    font-size: 70%;
    position: relative;
}
#subnav .nav li {
    width: 210px;
    height: 25px;
    margin: 2PX 0PX 2PX !important;
    background-color: #CECECE;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 3px 0px;
}
#subnav .nav li a {
    font-weight: bold;
    padding-left: 10px;
    line-height: 26px;
    display: block;
    color: #000;
}
#subnav .nav li ul {
    margin-top: 4px;
}
#subnav .nav li ul li {
    background-color: #EBEBEB;
}
#subnav .nav li:after {
    float: right;
    text-align: right;
    margin-top: 10px;
    content: url("http://s10.postimg.org/eh8ghojkl/arrowg.png");
    margin-right: 5px;
}

正如 fiddle 所强调的那样，问题是图像不会推送到此特定列表中每个 LI 元素的右侧。我希望无论其中有什么文本，它都能正常工作，并且如果菜单项超过 1 行，我不希望它重复。

生成的 html 无法修改。我还尝试使用 right: 0 的绝对位置并得到几乎相同的结果。有什么想法吗？

Answer 1

您的 CSS 指定您的图像在 li 之后，我认为应该在 li 内的 a 之后。我改变了它并调整了边距。这是更新后的代码:

#subnav .nav li a:after {
    float: right;
    text-align: right;
    margin-top: 3px;
    content: url("http://s10.postimg.org/eh8ghojkl/arrowg.png");
    margin-right: 5px;
}

参见 jsfiddle demo .