Question

我正在尝试设置导航栏的样式，以便所选链接在其下方有一个边框，导航栏中的每个链接都具有相同的120px宽度，但每个链接的文本长度不同，例如Home，Client Area，FAQ等我要做的是使底边框只是文本的长度而不是整个a元素的长度，它们的宽度都是120px 。我希望我已经解释好了。

以下是我正在使用的代码。

HTML代码

<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="About.html">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Client Area</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

CSS代码

ul{
    list-style:none;
}

nav li {
    float:left;
}

nav {
    float:right;
    margin-top: -3%;
}

nav a {
    display:block;
    width: 120px;
    text-align:center;
    text-decoration:none;
    color:#134BA0;
    font-size: 22px;
}

nav a:hover {
    color:#387CE1;
}

a.active {
    font-weight:bold;
    border-bottom: #387CE1 solid 2px;
}

在a.active课程中，我尝试了width:100%; border-width: 100%;和a.active border {width;100%;}等内容。然而，这些都没有奏效。

Answer 1

尝试通过删除宽度来改变“nav a”的css，而是给出边距，如下所示： -

nav a {
display: block;
margin: 0 20px;
text-align: center;
text-decoration: none;
color: #134BA0;
font-size: 22px;
}

Answer 2

使用此CSS：

ul{
    list-style:none;
}

nav li {
    float:left;
    width: 120px;
}

nav {
    float:right;
    margin-top: -3%;
}

nav li a {
    text-align:center;
    text-decoration:none;
    color:#134BA0;
    font-size: 22px;
}

nav a:hover {
    color:#387CE1;
}

nav li a.active {
    font-weight:bold;
    border-bottom: #387CE1 solid 2px;
}

基本上我将宽度放在li上并移除a
上的显示块

css导航菜单上的动态边框长度

2 个答案: