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

Answer 2

根据你的css

.navimage img a

正确对齐。但是列表项本身没有位置，请尝试使用以下方式将其浮动到右侧：

.navimage { float: right; }

这会使列表项向右下方。

链接在中心但右侧的图标

2 个答案: