Question

好的，所以我的问题是让我的'Facebook'和'Twitter'链接移动到导航栏的右侧。我想要保留在酒吧左侧网站上的所有链接。

现在看来，我似乎无法找到问题所在，以及如何解决问题。

我的HTML如下：

<!DOCTYPE html>
<html>
<head>
<link href="dropdown-menu.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>

<br />
<br />


<div id="navdiv">

<ul id="navigation" class="nav-main">

    <li class="list"><a href="index.html">PORTFOLIO</a>
    <ul class="nav-sub">
    <li><a href="logo.html">LOGO DESIGN</a></li>
        <li><a href="clothing.html">CLOTHING DESIGN</a></li>
        <li><a href="photoshop.html">PHOTOSHOP</a></li>
        <li><a href="layout.html">LAYOUT</a></li>   
    </ul>
    </li>
    <ul>
   <li><a href="about.html">ABOUT</a></li>
    </ul>
    </li>
    <li><a href="contact.html">CONTACT</a></li>
    <li class="social"><a href="https://www.facebook.com/dbgraphicdesign" title="Facebook"><img src="images/facebook.png"></a></li>
    <li class="social"><a href="https://twitter.com/dbergmandesigns" title="Twitter"><img src="images/twitter.png"></a></li>

</ul>



</div>
</body>
</html>

CSS如下：

#navigation{
    margin:auto;
    width:850px;
    height:45px;
    background-color:rgba(194, 6, 6, 0.6);

}

ul.nav-main,
ul.nav-main li{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.nav-main{
    position: relative;
}

ul.nav-main li:hover > ul{
    visibility: visible;
}

ul.nav-main li.hover,
ul.nav-main li:hover{
    position: relative;
    cursor: pointer;
    background:rgba(50, 50, 50, 0.9);
}

ul.nav-main li{
    float:left;
    display:block;
    height: 45px;
    color: #ededed;
    font: 14px Arial, Helvetica, sans-serif;
}

ul.nav-main li a{
    display:block;
    padding: 16px 16px 0 16px;
    height: 35px;
    color: #ededed;
    font: 14px Arial, Helvetica, sans-serif;
    text-decoration:none;
}

ul.nav-main li a:hover{
    color:#ededed;
}

ul.nav-sub{
    visibility: hidden;
    position: absolute;
    padding:5px;
    top: 45px;
    left: 0;
    background:rgba(194, 6, 6, 0.8);
}

ul.nav-sub li{
    list-style:none;
    display:block;
    padding-bottom:3px;
    height: 22px;
    float: none;
    width:120px;
    background: none;
}

ul.nav-sub li a{
    list-style:none;
    display:block;
    padding: 6px 5px 6px 5px;
    height: 15px;
    width:165px;
    background: none;
    font: 12px Arial, Helvetica, sans-serif;    
}

ul img{
height:25px;
}

真的希望有人可以帮助我...

Answer 1

试试这个：

ul.nav-main li.social {float: right;}

Answer 2

Here in the 4th lesson it has been described

对于您的变体，其想法是：

    <div class="nav-main">
        <ul>
            <li></li>
            <div class="social">
                <li></li>
                <li></li>
            </div>
        </ul>
    </div>

所以，css：

    .class nav-main {
        position: relative;
    }

    .class social {
        position: absolute;
        right: 0;
        /* optionally
        top: 0; */
    }

尝试将导航div中的最后两个链接移动到容器div的另一侧

2 个答案: