如何在右侧导航栏中定位某些元素

Question

我一直在为一个网站的导航栏工作,并希望在屏幕的左侧有4个元素,在屏幕的右侧有2个元素.我确信有一个简单的解决方案,但我只是没有让元素左右浮动.

这是我的HTML:

<div id="navbar">
        <ul>
            <!--<li><a href="index.html" class="logo"><img src="../img/PowerUpLogo.gif" class="logo"></a></li>-->
            <li><a href="home.html">Brand</a></li>
            <li><a href="stories.html">Link</a></li>
            <li><a href="community.html">Link</a></li>
            <li><a href="contact.html">Link</a></li>
            <span class="padding"><a href="log_in.html" class="button button-log-in">Log In</a></span>
            <span class="padding"><a href="sign_up.html" class="button button-sign-up">Sign Up</a></span>
        </ul>
    </div>

这是我的CSS:

/*****NAVBAR****/
#navbar ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#navbar ul li {
    display: inline-block;
    padding: 1.5% 2%;
}

#navbar ul li a {
    color: #4F8E64;
    font-size: 0.9em;
    font-weight: 500;
}

#navbar ul li a:hover {
    text-decoration: underline;
}

/**********************
******NAV BUTTONS******
**********************/

    .button {
    font-size: 0.9em;
}

.button-log-in {
    color: #6EC78B;
    background-color: #FFF;
    border: 1px solid #6EC78B;
}

.button-log-in:hover {
    color: #5CE68A;
    border: 1px solid #5CE68A;
}

.button-sign-up {
    color: #FFF;
    background-color: #6EC78B;
}

.button-sign-up:hover {
    background-color: #5CE68A;
}

Answer 1

您的HTML无效,因为您无法<span>直接嵌套在内部<ul>.只<li>允许s.您可以添加一个类,说right的<li>和float它.

<li class="right"><!-- Stuff --></li>

并提供以下CSS:

.right {float: right;}

确保你给overflow: hidden父母<ul>清除floats.