jquery - float 图像未正确 float

Question

好的，我有一个下拉菜单，在我将下拉菜单放在那里之前，登录图像正确地 float (向右)，但现在它根本不会 float 。如何让登录图像回到右侧？

HTML

<ul id="nav">
    <li><a href="#" class="activenav"><img src="../images/home.png" alt=""/></a></li>
    <li><a href="#"><img src="../images/image.png" alt=""/></a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    <div class="clear"></div>
    </li>
    <li><a href="#"><img src="../images/image.png" alt=""/></a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    <div class="clear"></div>
    </li>
    <li><a href="#"><img src="../images/image.png" alt=""/></a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    <div class="clear"></div>
    </li>
    <li><a href="#" id="login"><img src="../images/login.png" alt=""/></a></li>
</ul>

CSS

#nav {
    background:url(../images/nav.png) repeat-x;
    margin:0;
    height:32px;
    padding:13px; /* specific due to the background image */
    padding-bottom:0;
    border-bottom:solid 1px rgba(0,0,0,.1);
    text-align:left; /* fixes text align */
}
#nav ul {
    margin:0;
    padding:0;
}
#nav img {
    margin:0;
    padding:0;
}
#nav a {
    color:rgb(255,255,255);
    text-decoration:none;
    padding:10px;
}
#nav a:hover {
    background:url(../images/navlink.png);
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
#nav a.activenav {
    background:url(../images/navlink.png);
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
#login {
    float:right;
    margin:-10px 0 0 0; /* important since #login is floating */
}
#nav #login:hover {
    background:transparent;
}
.clear {clear:both;} 
#nav li {
    float: left;
    position: relative;
}
#nav ul {
    background:url(../images/subnav.png);
    display: none;
    margin:13px 0 0 0;
    position:absolute;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav ul li {
    clear:both;
    margin:12px 10px;
    width:150px;
}
#nav ul li a {
    margin:5px 0;
}

JQUERY

$(document).ready(function() {
    // drop down
    $('#nav li').hover(
        function() {
            $('ul', this).stop(true, true).fadeIn(50);
        },
        function() {
            $('ul', this).fadeOut(200);
        }
    );

});

我知道 javascript 与它无关，但以防万一。

Answer 1

你的 #login向右浮动但它在其父级内向右浮动 <li> ，看看这个带边框的版本，您会看到:

http://jsfiddle.net/ambiguous/YHs36/

最简单的解决方案是 float <li>向右调整 <a>有点让它正确定位。您可以将 CSS 更改为:

#login {
    float: right !important; /* !important to override the float:left */
    margin:-10px 0 0 0; /* important since #login is floating */
}
#login a {
    display: block;
}

然后是这样的 HTML:

<li id="login"><a href="#"><img ...></a></li>

实例:http://jsfiddle.net/ambiguous/qww58/

我用一只小猫替换了登录图像，这样我就可以看到它在哪里。因为我喜欢小猫。随意将其更改为 http://placedog.com/如果你喜欢狗，狗也很酷。