Question

我有简单的css＆amp; 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

首先，您实际上没有在li中定义任何ul元素，因此您的标记无效，其次您需要在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;
}

每个Chriz的回答

nb。 - 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将完成您的工作

浮动：对;在<ul>（nav）</ul>

2 个答案: