html - 导航栏没有扩展到全宽？

Question

Host Folder

如果您单击该链接，然后单击“all.html”，您应该会看到一个带有未完成导航栏的页面。由于某些未知原因，列表中的 li 正在堆叠。有人能告诉我为什么“成员(member)资源”等在下面排成一排吗？如何解决？我尝试使用包含 的 text-align、float、width 和 margin div、ul 和 li 但还没有得到任何结果。谢谢(注:使用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

您应该将 #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 中删除背景颜色，并将其放在您的导航栏类中，而不是