html - 链接在中间但图标在右边

Question

我的位置有问题。当链接位于导航中心时，我想让右边的图标对齐。但好像我碰壁了。

这是我的HTML

<div id="nav">
    <ul>
        <li> <a href="home.html"> HOME </a> 
        </li>
        <li> <a href="about.html"> ABOUT </a> 
        </li>
        <li> <a href="music.html"> MUSIC </a> 
        </li>
        <li> <a href="gallery.html"> GALLERY </a> 
        </li>
        <li> <a href="contact.html"> CONTACT </a> 
        </li>
        <li class="navimage"> <a href="#"> <img src="abc.jpg" /> </a> 
        </li>
        <li class="navimage"> <a href="#"> <img src="abc.jpg" /> </a> 
        </li>
        <li class="navimage"> <a href="#"> <img src="abc.jpg" /> </a> 
        </li>
        <li class="navimage"> <a href="#"> <img src="abc.jpg" /> </a> 
        </li>
    </ul>
</div>

这是我的 CSS

#nav {
    border-bottom:2px solid #FFF;
    margin-bottom:20px;
    padding:0;
    text-align:center;
}
#nav li {
    display:inline;
}
#nav a {
    display:inline-block;
    padding:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
}
#nav a:hover {
    color:#DEB887;
}
.navimage img {
    width:30px;
    height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
}
.navimage img a {
    text-align:right;
}

这是要检查的 jsfiddle。 http://jsfiddle.net/zN92c/

Answer 1

替换:

.navimage img a {
    text-align:right;
}

与:

.navimage {
    float:right;
}