Question

The Error

通过尝试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;
}

Answer 2

只需删除课程

即可

class="right-align"

来自所述li元素。您的代码将按您的意愿运行。

Answer 3

您需要做的就是删除： .myNavBar＆gt; .right-align { 浮动：权利; }

Answer 4

只需在CSS文件中删除这些行：

.myNavBar {
    width: 100%;
}

.myNavBar > li {
    width: 100%;
}

此外，最好将浮动<li>作为<li>

中的第一个<ul>元素

<ul class="myNavBar">
    <li class="right-align">
        <a href="login.html">Login/Signup</a>
    </li>
    <li>...</li>
</ul>

Float：右边一个列表项不起作用

4 个答案: