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>次。您可以在right和<li>添加一个类，比如说float。

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

并提供以下CSS：

.right {float: right;}

请务必将overflow: hidden提供给父<ul>以清除float。

Answer 2

#navbar ul li:nth-child(2) {
    float: right;
}

它给你右边的第二个li元素。

这样做的方法也很多，但这是最短的方式。

Answer 3

最简单的解决方案是将按钮组包装在另一个div中，例如。 <div class="nav-left"></div>和<div class="nav-right"></div>。然后只需添加css属性：

.nav-left { float: left; }
.nav-right { float: right; }

您可能需要添加clearfix，具体取决于样式的其余部分。

Answer 4

最简单的解决方案是在应该在右边的两个元素周围加一个div，然后将它们向右浮动：

            <div class="right">
            <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>
            </div>

CSS

 .right {
        float: right;
    }

这是小提琴：https://jsfiddle.net/uvo0ceu1/1/

Answer 5

发疯并开始使用FLEXBOX功能。最小的变化，它就像一个魅力。

将按钮移出UL，给他们自己的容器div。检查代码段以获取评论......

* { outline: 1px dashed red } /* just for debugging, remove */

#navbar { /* ADD make navbar a flex container */
    display: flex; 
    justify-content: space-between; /* moves 2 elements (UL and #buttons)
                                       to either side of #navbar */
}

/*****NAVBAR****/
#navbar ul {
    display: flex;  /* ADD make UL a flex container too */
    flex: 1 1 auto; /* ADD grow child elements (LI, default = 0 1 auto)*/
    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;
}

<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>
  </ul>
  <div id="buttons"> <!-- id is optional -->
    <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>
  </div>
</div>

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

5 个答案: