Question

代码如下：

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;
}

如小提琴所强调的那样，问题是图像不会推到此特定列表中每个LI项目的右侧。无论文本在哪里，我希望它能够正常工作，如果菜单项超过1行，我不希望它重复。

我无法修改html，因为这是生成的。我也尝试使用右边的绝对位置：0并得到相同的结果。有什么想法吗？

Answer 1

#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;
position: relative;
}
#subnav .nav li:after {
/* float: right; */
position: absolute;
top: 0;
right: 0;
margin-top: 7px;
content: url("http://s10.postimg.org/eh8ghojkl/arrowg.png");
margin-right: 5px;
}

小提琴：http://jsfiddle.net/xr1ar5z9/

如果您希望我解释一下，我只使用position:absolute作为箭头，position:relative作为列表项，因此<li>元素正确包含绝对定位箭头。多次遇到这个问题，这是我用来解决问题的最佳方法：）

Answer 2

您的CSS指定您的图片位于li之后我认为应该位于a内的li之后。我改变了这一点并调整了利润率。这是更新后的代码：

#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。

如何将图像推到每个菜单项块的右侧

2 个答案: