将图像对齐到列表中的文本右侧

Question

这是我的代码：

http://jsfiddle.net/JrXV8/4/

#nav ul img {
    display:inline-block;}

我试图在我的顶层右侧放置一个向下箭头＆＃34; A＆＃34;但它有它，所以它仍然可以点击向下菜单。这样做的正确方法是什么？

1. 它应该是图像还是将图像作为背景放入空跨度？
2. 如何让图片位于顶级文字的右侧，而不是位于其下方？

Answer 1

我从HTML中删除图片并添加此CSS规则：

#nav > li > a {
    background: url('http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png') 100% 50% no-repeat;
}

jsFiddle example

Answer 2

为什么不将图像放在锚标记内？我认为这会产生你想要的效果。

Fiddle

<强> HTML

<li>
    <a href="#">
        A <img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png">
    </a>
</li>

CSS

#nav li a img{
 vertical-align:bottom;   
}

Answer 3

将此添加到您的css

#nav li img {    
  position: absolute;
  top:0;
  right:0;
}

请记住，位置根据位置相对的下一个父级进行绝对调整

Answer 4

所以看起来你有一点错字！

而不是#nav ul img {，应该是：ul#nav img！

然后，通过添加：cursor:pointer; position:absolute; top:15px; right:10px;，你应该很好！

http://jsfiddle.net/9j4xf/1/