浮子：右;在<ul>(导航)

Question

我有一个简单的CSS &html菜单。这很好，但我试着把一些链接移到右边，但当我尝试的时候，所有这些都消失了。我在里面试了试，还是一无所获。有人能帮帮我吗?

#forum-nav,
#forum-nav ul {
    list-style: none;
        padding-left: 20px;
        padding-right: 20px;
        width: 960px;
}
#forum-nav {
    float: left;
}
#forum-nav > li {
    float: left;
}
#forum-nav li a {
    display: block;
    height: 28px;
    line-height: 2em;
    padding: 0 1.0em;
    text-decoration: none;
}
#forum-nav ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#forum-nav ul li a {
    width: 80px;
}
#forum-nav li:hover ul.dropdown {
    display: block; 
}

/* Main menu
------------------------------------------*/
#forum-nav {
    background:#597288;
}
#forum-nav > li > a {
    color: #fff;
    font-weight: bold;
}
#forum-nav > li:hover > a {
    background: #889bac;
    color: #fff;
}
.active {
    background: #889bac;
    color: #fff;
}

/* Submenu
------------------------------------------*/
#forum-nav ul{
    margin-left: -20px;
}
#forum-nav ul a {
        border-top: 1.5px solid #fff;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    background: #597288;
}
#forum-nav ul li a {
    color: #FFF;
}
#forum-nav ul li:hover a {
    background: #889bac;
}
#forum-nav ul li:last-child a {
    border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
}

html:

和

<ul id="forum-nav">
<id="m_index"><a href="#">LINK ON LEFT</a></li>
<id="m_index"><a href="#">LINK ON LEFT</a></li>
AND I WANT IN ON RIGHT
<id="m_index"><a href="#">LINK ON RIGHT</a></li>
<id="m_index"><a href="#">LINK ON RIGHT</a></li>
</ul>

我怎么移动它，它仍然会正常工作?

Answer 1

首先，你没有在你的ul中定义任何li元素，所以你的标记是无效的，其次，你需要在你的CSS中添加一个规则，将最后两个列表项浮动到右边。

把你的HTML改成:

<ul id="forum-nav">
  <li><a href="#">LINK ON LEFT</a></li>
  <li><a href="#">LINK ON LEFT</a></li>
  <li><a href="#">LINK ON RIGHT</a></li>
  <li><a href="#">LINK ON RIGHT</a></li>
</ul>

和添加到你的CSS:

#forum-nav li:nth-child(3),#forum-nav li:nth-child(4){
    float:right;
}

nb。如果你想让除前两个元素外的所有子元素都向右浮动，你可以使用:

#forum-nav li:nth-child(n+3){
    float:right;
}

nb。根据Chriz的回答- id属性必须是唯一的

Answer 2

html

<ul id="forum-nav">
  <li><a href="#">LINK ON LEFT</a></li>
  <li><a href="#">LINK ON LEFT</a></li>
  AND I WANT IN ON RIGHT
  <li class='right'><a href="#">LINK ON RIGHT</a></li>
  <li class='right'><a href="#">LINK ON RIGHT</a></li>
</ul>

css

.right { float:right; }

注意:给li打开标签，给相同的id更多的元素是不好的做法，这个CSS类right会做你的工作