浮动CSS ul导航,无需重新排序

时间:2011-10-17 18:50:13

标签: jquery css navigation css-float

我正在使用此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类是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
}

我做错了什么想法?我真的很感激任何帮助! :)

1 个答案:

答案 0 :(得分:1)

如果您想维护订单,则只能浮动列表项目。如果你想要整个事情在右边,只需浮动<ul>,而不是。