浮動圖像不能正確浮動

Question

好吧我有一個下拉菜單，在將下拉菜單放在那裏登錄圖像正確地浮動（向右），但現在它不會浮動。我將如何讓登錄圖像返回到右側？

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>內，看看這個borderized版本，你會看到：

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

最簡單的解決方案是將<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/，狗也很酷。