css - 导航栏，边框底部没有全部填满

Question

所以我的问题是，我的 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;
}

如何让它填满所有的“里”？

Enter image description here

我这里有 fiddle 链接。我设法使黑线从一条垂直白线到另一条垂直白线，但是当我尝试放入一些填充底部以使黑线下降时，它也会给垂直线提供填充，我不'想要那个。

Enter link description here

Answer 1

你有这条规则:

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