1

我正在尝试设置导航栏的样式，以便所选链接下方有一个边框，导航栏中的每个链接都具有相同的 120px 宽度，但每个链接的文本长度不同，例如主页、客户区、常见问题解答等等我想要做的是让底部边框只是文本的长度，而不是整个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%;}

4

2 回答 2

3

尝试通过删除宽度来更改“nav a”的css，而不是提供边距，如下所示：-

nav a {
display: block;
margin: 0 20px;
text-align: center;
text-decoration: none;
color: #134BA0;
font-size: 22px;
}
于 2013-09-12T11:39:11.513 回答
0

使用这个 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 上的显示块

于 2013-09-12T11:42:32.303 回答