Question

Host Folder

如果您点击该链接，然后点击＆＃34; all.html＆＃34;，您应该会看到一个包含未完成导航栏的页面。由于某些未知原因，列表中的li正在堆叠。有人可以告诉我为什么＆＃34;会员资源＆＃34;以及如何解决这个问题？我尝试使用包含text-align，float和{{width，margin，div和ul的{{1}} 1}}但是天堂无处可去。谢谢（注意：使用Bootstrap v3.3.6）！

HTML：

li

CSS：

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

SIDENOTE：有谁知道为什么页面底部有滚动条？右边没有额外的内容，我很确定没有任何边缘可以推动它走得那么远。我在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%;
}

第二种查看全宽导航栏的方法就像引导指南那样

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

Navbar没有扩展到全宽？

2 个答案: