css - 悬停时的菜单下划线,文本长度而不是元素长度
问题描述
我试图在悬停时的菜单项下方添加一个下划线,即单词的长度。现在,它需要元素的长度。我怎样才能做到这一点?
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand active" href="index.html">
<img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav nav-fill w-100">
<a class="nav-item nav-link" href="menu.html">La carte</a>
<a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
<a class="nav-item nav-link" href="event.html">Événements</a>
<a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
</div>
</div>
</nav>```
.navbar-light .navbar-nav .nav-link {
padding-bottom: 5px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
color: black;
}
.navbar-light .navbar-nav .nav-link:hover {
padding: 5px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
color: black;
border-bottom: 5px solid#b40900;
}
解决方案
从悬停中删除填充并将边距添加到普通类参见示例,文本装饰也没有。希望它会有所帮助..
.navbar-light .navbar-nav .nav-link {
padding-bottom: 5px;
margin:5px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
text-decoration: none;
line-height:2rem;
color: black;
}
.navbar-light .navbar-nav .nav-link:hover {
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
color: black;
border-bottom: 5px solid #b40900;
}
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand active" href="index.html">
<img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav justify-content-between w-100">
<a class="nav-item nav-link" href="menu.html">La carte</a>
<a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
<a class="nav-item nav-link" href="event.html">Événements</a>
<a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
</div>
</div>
</nav>
推荐阅读
- r - ggplot:如何废除字母顺序
- node.js - 我如何用我的视图渲染 mongodb 数据
- postgresql - PostgreSQL 循环索引
- android - Android NotificationCompat.Builder setsmallicon() 不工作
- makefile - 通过 Makefile 和 `dpkg-buildpackage -us -uc` 进行 Eiffel 编译产生错误
- python - 即使数据看起来不错,也无法读取 CSV 文件
- c++ - C++ SFML 屏幕边界碰撞
- java - JPA @Query 与 Entity like 参数
- swift - GCDAsyncUdpSocket 套接字在发送 255 个数据包之间关闭
- css - 将最后两个弹性项目放置在容器的末尾