导航栏未与其下方的元素对齐，为什么？

Question

如果您单击 link，然后单击 "all.html"，您应该会看到一个未完成的导航栏，其中包含两个项目 "Sample" 和 "Text"。您还应该看到蓝色填充切入其下方的白色背景这一事实。

我试过 #topnav div 中所有元素的边距和填充，但都无济于事。我试过更改 display、float 和 text-align，但即使它解决了当前问题，也会产生更多问题。我已经尝试了多个教程，此时已经为这个导航栏重写了 html 和 css 两次，但我一直卡在这个问题上：导航栏的蓝色部分切入白色.导航栏应该看起来像 here.

谁能告诉我为什么蓝色会切入白色，即使有适当的边距和填充宽度？谢谢！（注意页面使用的是Bootstrap v3.3.1）

HTML:

<div class="row" id="topnav">
    <ul>
        <li>
           <a href="#">Sample</a>
        </li>
        <li>
            <a href="#">Text</a>
        </li>
    </ul>
</div>

CSS:

#topnav{
    display: inline;
}
#topnav *{
    display:inherit;
}
#topnav ul{
    list-style-type: none;
    text-align: center;
    margin: 0;
    margin-bottom: 55px;
    background-color: rgb(0,93,164);
    padding: 15px;
}
#topnav li{
    display: inline-block;
    margin:0;
    padding: 0;
}
#topnav a{
    text-decoration: none;
    color:white;
    margin: 0;
    padding: 0;
}
#topnav a:hover{
    background-color:black;
}

Answer 1

这是因为您的 ul 元素有 display: inline。将其更改为 inline-block 或 block:

#topnav ul {
  display: block;
}

Answer 2

#topnav ul {
    padding-bottom: 0px;
}

导航栏未与其下方的元素对齐，为什么？

Navbar not aligning to element below it, why?

html

css

navbar

twitter-bootstrap