所以我的问题是,我的 li 中的每个 a 标签都有一些垂直线。当我输入 border-bottom
时,该行并没有填满它;它缺少看起来像一两个像素的东西。
<div id="Nav_Bar">
<nav>
<ul>
<li id="Forside">
<a class="active <?php selected("index") ?>" href="../index.php">Forside</a>
</li>
<li>
<a class="active <?php selected("sortiment") ?>" href="sortiment.php">Sortiment</a>
</li>
<li>
<a class="active <?php selected("galleri") ?>" href="galleri.php">Galleri</a>
</li>
<li>
<a class="active <?php selected("kontakt_view") ?>" href="kontakt_view.php">Kontakt</a>
</li>
</ul>
</nav>
</div><!-- End of Nav_Bar -->
#Nav_Bar {
position: relative;
width: 1160px;
margin: 0 auto;
height: 52px;
margin-top: 156px;
background-color: #fa8268;
box-shadow: 0 8px 8px -6px gray;
}
#Nav_Bar nav{
text-align: center;
padding-top: 15px;
}
#Nav_Bar li {
margin-top: 13px;
display: inline;
padding-top: 10px;
padding-bottom: 2px;
border-right: 1px solid white;
}
#Forside {
border-left: 1px solid white;
}
#Nav_Bar a {
font-size: 25px;
color: white;
padding: 40px;
padding-bottom: 6px;
padding-top: 10px;
}
#Nav_Bar a:hover {
color: black;
border-bottom: 2px solid black;
}
#Nav_Bar a.Selected {
color: black;
border-bottom: 2px solid black;
}
如何让它填满所有的“里”?
我这里有 fiddle 链接。我设法使黑线从一条垂直白线到另一条垂直白线,但是当我尝试放入一些填充底部以使黑线下降时,它也会给垂直线提供填充,我不'想要那个。
最佳答案
你有这条规则:
#Nav_Bar li {
margin-top: 13px;
display: inline;
padding-top: 10px;
padding-bottom: 2px;
border-right: 1px solid white;
}
border-right: 1px solid white;
是菜单项之间的垂直线,所以如果您删除它,您可能会得到想要的。
注意:为了更好的悬停行为,您可能需要更改 display: inline;
至 display: inline-block;
关于css - 导航栏,边框底部没有全部填满,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34476843/