Question

所以我的问题是，我的每个标签都有一些垂直线。当我输入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;
}

如何填写所有＆＃34; li＆＃34;？

Enter image description here

我这里有小提琴链接。我设法让黑线从一条白色线条到另一条白线，但当我尝试放入一些填充底部时，为了使黑线下降，它也会给垂直线条填充，我不会＃39; t想要那个。

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;

Answer 2

边框将始终位于元素周围（在这种情况下为li），边框始终在角落处连接。

因此，使用定位的伪元素（父li需要position:relative）而不是底部边框，并根据需要调整边距。

#Nav_Bar li:hover:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
  margin-top: 5px;
}

JSFiddle Demo

导航栏，边框底部不会填满所有内容

2 个答案: