html - float :Right on one list item not working

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;
}