导航栏没有扩展到全宽？

Question

如果您单击 link，然后单击 "all.html"，您应该会看到一个带有未完成导航栏的页面。由于某些未知原因，列表中的 li 正在堆叠。有人能告诉我为什么 "Member Resources" 和 on 在下面排成一行以及如何解决这个问题吗？我尝试使用包含 div、ul 和 [=] 的 text-align、float、width 和 margin 12=]s 但没有得到任何结果。谢谢（注意：使用Bootstrap v3.3.6）！

HTML:

<div class="row" id="topnav">
     <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
           <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
        <li>
            <a href="#">Sponsor</a>
        <li>
            <a href="#">All the rest of the li's are like the ones above, I've ommitted them to save space</a>
        </li>
    </ul>
</div>

CSS:

#topnav{
    display: inline;
}
#topnav *{
    display:inherit;
}
#topnav ul{
    list-style-type: none;
    margin: 0;
    margin-left: auto;
    background-color: rgb(0,93,164);
    padding: 1.5%;
    display:inline-block;
}
#topnav li{
    margin:0;
    padding: 0 2.5%;
    }
#topnav a{
    text-decoration: none;
    color:white;
    margin: 0;
    padding: 0;
    font-weight:600;
}

旁注：有人知道为什么页面底部有滚动条吗？右边没有额外的内容，我很确定没有利润会把它推到那么远。我在 Chrome 上看到它，还有其他人看到它并知道它为什么会发生吗？

Answer 1

试试这个：

HTML

<div id="topnav">
     <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
           <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
        <li>
            <a href="#">Sponsor</a>
        <li>
            <a href="#">All the rest of the li's are like the ones above, I've ommitted them to save space</a>
        </li>
    </ul>
</div>

CSS

#topnav{
    display: inline;
}
#topnav *{
    display:inherit;
}
#topnav ul{
    list-style-type: none;
    margin: 0;
    margin-left: auto;
    background-color: rgb(0,93,164);
    padding: 1.5%;
    display:inline-block;
    width: 100%;
}
#topnav li{
    margin:0;
    padding: 0 2.5%;
    }
#topnav a{
    text-decoration: none;
    color:white;
    margin: 0;
    padding: 0;
    font-weight:600;
}

Answer 2

您应该将 #topnav ul 的宽度设置为 100% 以将其设置为全宽。

#topnav ul{
    list-style-type: none;
    margin: 0;
    margin-left: auto;
    background-color: rgb(0,93,164);
    padding: 1.5%;
    display:inline-block;
    width: 100%;
}

查看全宽导航栏的第二种方法是按照 bootstrap 指南所说的去做

    <nav class="navbar navbar-default">
    <div class="container-fluid">
    <div class="row" id="topnav">
         <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
               <a href="#">About</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">Sponsor</a>
            <li>
                <a href="#">All the rest of the li's are like the ones above, I've ommitted them to save space</a>
            </li>
        </ul>
     </div>
   </div>
</nav>

仔细观察会发现导航栏是全宽的并且颜色不同（故意留给您注意）。您可以从 ul 中删除背景颜色并将其放在导航栏上 class 而不是

导航栏没有扩展到全宽？

Navbar not expanding to full width?

html

css

navbar

twitter-bootstrap