如果单击链接，然后单击“ all.html”，则应该看到未完成的导航栏，其中包含两个“示例”和“文本”项。您还应该看到一个事实，蓝色填充物切入了它下面的白色背景。
我试过#topnavdiv内所有元素的边距和填充都无济于事。我已经尝试过更改display，float和text-align，但是即使它解决了当前问题，也会带来更多问题。我已经尝试了多个教程，并且在这一点上两次重写了该导航栏的html和css，但是我一直陷在这个问题上：导航栏的蓝色部分切成白色。导航栏应与此处的外观相同。
谁能告诉我为什么即使有适当的边距和填充宽度，蓝色也会变成白色？谢谢！（请注意，该页面使用的是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;
}
这是因为您的ul元素具有display: inline。将其更改为inline-block或block：
#topnav ul {
display: block;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句