浮动CSS ul导航右不重新排序

Question

我正在使用这个jquery导航:http://css-tricks.com/5582-jquery-magicline-navigation/

我想有导航浮动到右边，没有重新排序(例如。家，联系变成了联系，家)。不幸的是，当我累了自己的时候，我得到了一些奇怪的结果——你可以在我上传的这个屏幕截图中看到:

http://postimage.org/image/1idig02pw/

原始代码:

#navstyle {
list-style:none;
position:relative;
width:960px;
margin:0 auto
}
#navstyle li {
display:inline-block
}
#navstyle a {
color:#bbb;
font-size:14px;
float:left;
text-decoration:none;
text-transform:uppercase;
padding:6px 10px 4px
}
#navstyle a:hover {
color:#FFF
}
#magic-line {
position:absolute;
bottom:-2px;
left:0;
width:100px;
height:2px;
background:#fe4902
}
.current_page_item a {
color:#FFF!important
}
.ie6 #navstyle li,.ie7 #navstyle li {
display:inline
}

HTML: UL被div "nav-wrap"包围。UL类是"group"，id为"navstyle"。当前页面，home，有一个li类"current_page_item"。

这是我修改的代码，使其右浮动:

.nav-wrap {
float:right;
width:100%;
font-size:1em;
margin-top:108px;
position:relative
}
#navstyle {
list-style:none;
float:right;
display:inline-block;
margin:0
}
#navstyle li {
display:inline-block
}

你知道我做错了什么吗?我真的很感激任何帮助!:)

Answer 1

如果要保持顺序，则只能浮动列表中剩余的项。如果您希望整个内容都在右边，只需将<ul>改为右浮动即可。