在CSS中向右浮动时菜单反转的问题

Question

我有一个设置为100%的div,并且在另一个div中,它居中并设置为883px.

导航是一个列表,但如果我将float:right元素应用于此元素,则它会颠倒列表的顺序.当然我可以改变代码中的顺序但是必须有更好的方法吗？

<div id="navigation"><!-- START NAVIGATION -->
    <ul class="navigation">
        <li><a href="#" title="" alt="" class="current">home</a></li>
        <li><a href="#" title="" alt=""><img src="images/navline.png" align="right">portfolio</a></li>
        <li><a href="#" title="" alt="">blog</a></li>
        <li><a href="#" title="" alt="">get in touch</a></li>
    </ul>
</div>
<div id="border"></div><!-- END NAVIGATION -->
<div style="clear:both"></div>

而CSS ......

#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}

#navigation ul {
width:883px;
margin:0px auto;
}

ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
}

#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
float:right;
}

任何人都可以帮助向我展示我的方式错误吗？

Answer 1

向右浮动会反转元素.这是预期的行为.

如果你想让菜单向右对齐,那么你需要让ul元素浮动到右边,但里面的li元素必须有一个浮动.

#navigation {
  width:100%;
  background-color:#383a3c;
  height:43px;
}

#navigation ul {
  width:883px;
  margin:0px auto;
}

ul.navigation {
  font-family:'ChunkFiveRegular', Arial, sans-serif;
  font-size:18px;
  float: right;
}

#navigation li {
  float: left;
  padding: 0px 10px;
}

#navigation li a {
  display:block;
  margin:13px 0px 0px 0px;
  text-decoration:none;
  color:#8cd8db;
}   

在这种情况下,菜单仍然不会与右边对齐,因为您指定了宽度:883px; 到ul元素.如果您希望它与右侧对齐,则只需删除此宽度即可.