浮动：一个列表项的右侧不起作用

Question

所以我通过尝试float:right; Login/Signup 链接得到了上述错误。我似乎无法让它与我当前的设置一起使用。我尝试将它向左浮动，但最终只是将li 放在标准顺序中，宽度为 100%。我想知道我是否是 css 的白痴，不能做这样简单的事情。目标是让最后一个<li> 靠在右边

代码：HTML

    <div id="mainNav">
    <nav class="myNav">
        <ul class="myNavBar">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="user.html">Sample User</a>
            </li>
            <li>
                <a href="jobs.html">Sample Jobs</a>
            </li>
            <li>
                <a href="findcom.html">Sample Find</a>
            </li>
            <li class="right-align">
                <a href="login.html">Login/Signup</a>
            </li>
            <br class="clearBoth"/>
        </ul>
    </nav>
</div>

代码：CSS

.myNav {
    padding: 15px;
    margin: 0;
    margin-bottom: 5px;
    background-color: #81A7ED;
    padding-bottom: 5px;
}

.myNavBar {
    list-style-type: none;
    width: 100%;
    margin-right: 15px;
    margin-left:15px;
}

.myNavBar > li {
    display: inline;
    width: 100%;
}

.myNavBar > li > a {
    color: #0C3A8E;
    box-sizing: border-box;
    border-bottom: solid 2px #81A7ED;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: small;
    transition: border-bottom .25s;
}

.myNavBar > li > a:hover {
    border-bottom: solid 2px #0C3A8E;
    text-decoration: none;
    transition: border-bottom .25s;
}
.myNavBar > .right-align {
    float:right;
}

感谢您的帮助！

Answer 1

出于某种原因，您已将 width: 100%; 设置为您的 LI 元素

<br class="clearBoth"/> 也不是UL 的有效子代：)

jsBin

修改后的 HTML：

<ul class="myNavBar cf">

您编辑的带有注释的 CSS：

*{padding:0; margin:0;} /* Do you use some CSS reset? */
a{  text-decoration: none; }
/* Clearfix   http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after { clear: both; }
/* Used to clear floats */


/* Now... */
nav.myNav {
    padding: 15px;
    margin-bottom: 5px;
    background-color: #81A7ED;
}

ul.myNavBar {
    list-style: none;
    /*width: 100%; it's already "100%" by defalt*/
    /* ??? 100% and than margin? 
    margin-right: 15px; 
    margin-left:15px;
    */
}
ul.myNavBar > li {
    float:left;
    /*width: 100%; why 100? */
}
ul.myNavBar > li > a {
    display: inline-block; /* Note this !*/
    color: #0C3A8E;
    box-sizing: border-box;
    border-bottom: solid 2px #81A7ED;
    padding: 7px 15%; /* Note this */
    font-size: small;
    transition: border-bottom .25s;
}
ul.myNavBar > li > a:hover {
    border-bottom: solid 2px #0C3A8E;
    /*transition: border-bottom .25s;  is already defined! */
}
.myNavBar > .right-align {
    float:right;
}