第一段引用上面的摘要：
本文针对响应式导航栏在移动视图下，链接悬停时下划线超出文本长度的问题，提供了一种简洁有效的解决方案。通过调整CSS样式，特别是width和margin属性，确保下划线长度与文本内容精确匹配，同时保持文本居中显示，从而优化移动端用户体验。本文将详细介绍具体的CSS修改方法，并提供完整的代码示例。
问题描述
在构建响应式导航栏时，当导航栏在移动设备上折叠并展开时，链接在悬停时出现的下划线可能会超出文本的实际长度，导致视觉上的不协调。 这个问题通常出现在当链接的 display 属性被设置为 block，并且导航栏的宽度被设置为 100% 时。
解决方案
核心在于调整移动视图下导航链接的宽度和外边距。 通过将链接的 width 属性设置为 fit-content，可以确保链接的宽度仅与其内容相适应。 同时，将左右 margin 设置为 auto 可以使链接在其容器中居中显示。
具体步骤
定位问题代码: 找到 CSS 中控制移动视图下导航栏链接样式的媒体查询部分。通常，这部分代码会使用 @media (max-width: 768px) 这样的规则。
修改 CSS 样式: 在媒体查询中，修改 .navbar a 的样式，添加 width: fit-content; 和 margin: 1.5rem auto; 属性。
@media (max-width: 768px) { .navbar a { display: block; margin: 1.5rem auto; width: fit-content; }}
width: fit-content;：使链接的宽度适应其内容。margin: 1.5rem auto;：设置链接的上下外边距为 1.5rem，左右外边距为 auto，从而实现水平居中。
完整代码示例
下面是一个包含修改后的 CSS 代码的完整示例：
Responsive Navbar * { color: white; text-align: center; box-sizing: border-box; margin: 0; padding: 0; } body{ background: blue; } .nav-link { font-weight: bold; text-decoration: none; color: white; padding: 20px 0px; margin: 0px 20px; display: inline-block; position: relative; opacity: 0.75; } .nav-link:hover { opacity: 1; } .nav-link::before { transition: 300ms; height: 3px; content: ""; position: absolute; background-color: white; } .nav-link-ltr::before { width: 0%; bottom: 10px; } .nav-link-ltr:hover::before { width: 100%; } .lyrics { padding-top: 5%; } .header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 100px; background: rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(10px); border-bottom: 2px solid rgba(255,255,255, .2); position: sticky; top:0; } .navbar a { font-size: 18px; text-decoration: none; margin-left: 35px; transition: .3s; } .navbar a:hover { -webkit-text-stroke: 1px white; } .container { display: inline-block; margin: 0 auto; padding-top: 15%; } .text { font-size: 30px; font-weight: 900; letter-spacing: 5px; border-right: 5px solid; width: 100%; white-space: nowrap; overflow: hidden; animation: typing 2s steps(17), cursor .4s step-end infinite alternate; } /* cursor blinking effect */ @keyframes cursor { 50% { border-color: transparent; } } /* Typewriter effect */ @keyframes typing { from { width: 0 } } #menu-icon { font-size: 36px; color: white; display: none; } @media (max-width: 992px) { .header { padding: 1.25rem 4%; } } @media (max-width: 768px) { #menu-icon { display:block; } .navbar { position:fixed; top: 100%; left: 0; width: 100%; padding: .5rem 4%; background:rgba(255,255,255, .1); border-bottom: 2px solid rgba(255,255,255, .2); display: none; } .navbar.active { display: block; } .navbar a { display: block; margin: 1.5rem auto; width: fit-content; } }Matt Hello, Matt Here.
const menuIcon = document.querySelector("#menu-icon"); const navbar = document.querySelector(".navbar"); menuIcon.addEventListener("click", () => { menuIcon.classList.toggle("bx-x"); navbar.classList.toggle("active"); });Molly - Playboi Carti.
Look at these diamonds, they shinin' (Yeah)
Look at these bitches, they lyin' (Yeah)
Baby, these diamonds not Johnny (Yeah)
I just called up Avianne (Yeah)
I don't got no stylist (Yeah)
All my planes are privates
Perkys on the privates
We don't fuck with molly
总结
通过使用 width: fit-content; 和 margin: 1.5rem auto;，可以有效地解决响应式导航栏在移动视图下，链接悬停时下划线过长的问题。这种方法简单易懂，并且能够保持导航链接在移动设备上的良好显示效果。 在实际开发中，可以根据具体的设计需求调整 margin 的值，以达到最佳的视觉效果。
以上就是修复响应式导航栏中悬停下划线过长的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514993.html
微信扫一扫 
支付宝扫一扫 
