导航栏悬停底部边框切换异常问题求助（附代码）

需求与问题 #

• 需求：导航栏内两个链接各占50%宽度且居中，底部有贯穿整页的灰色边框；鼠标悬停链接时，对应位置的灰色边框变为蓝色。
• 当前问题：
  1. 给.topnav加底部灰色边框后，hover链接时蓝色边框会把灰色边框向下推，无法覆盖
  2. 移除.topnav边框、给单个链接加边框后，hover效果正常，但边框无法贯穿整页，右侧存在间隙

现有代码 #

HTML #

<div class="topnav">
    <a class="accommodations" href="#accommodations">Accommodations</a>
    <a class="activities" href="#activities"> Activities </a>
</div>

移动端CSS（原始版本） #

.topnav {
    padding-top: 17px;
    border-bottom: solid 3px #808080;
    text-align: center;
    display: flex;
    border-top: none;
    padding-bottom: 10px;
}

.topnav a {
    width: 50%;
    padding-top: 17px;
    border-top: none;
}

.topnav a:hover {
    padding-top: 17px;
    border-top: none;
    border-bottom: solid 3px #0065fc;
    padding-bottom: 10px;
}

问题原因分析 #

1. 边框推挤问题：默认盒模型中，边框是额外占用空间的。.topnav本身有3px的底部灰色边框，hover时链接又新增3px蓝色边框，两个边框叠加导致元素被向下推。
2. 边框不贯穿问题：页面默认的body/html边距、或者未开启box-sizing: border-box，导致链接的50%宽度不包含边框，最终整体边框无法铺满页面。

解决方案（新手友好版） #

核心思路 #

• 用box-sizing: border-box让元素宽度包含边框/内边距，避免尺寸溢出
• 给每个链接默认加灰色边框，hover时直接替换为蓝色，消除边框叠加的推挤问题
• 重置页面默认边距，确保边框真正贯穿整页

修改后的CSS代码 #

/* 重置页面默认边距，确保无间隙 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 关键：让width包含边框和内边距 */
}

.topnav {
    padding-top: 17px;
    text-align: center;
    display: flex;
    border-top: none;
    padding-bottom: 10px;
    /* 移除原来的border-bottom，改为给每个链接设置默认灰色边框 */
}

.topnav a {
    width: 50%;
    padding-top: 17px;
    border-top: none;
    border-bottom: solid 3px #808080; /* 默认灰色边框 */
}

.topnav a:hover {
    border-bottom: solid 3px #0065fc; /* hover时替换为蓝色边框 */
    /* 无需重复设置padding，避免额外空间变化 */
}

效果说明 #

• 链接默认显示灰色底部边框，两个链接的边框拼接后正好贯穿整页
• 鼠标悬停时，对应链接的边框直接切换为蓝色，不会向下推挤其他元素
• 页面左右无默认间隙，边框真正铺满整个页面宽度

内容的提问来源于stack exchange，提问作者julia hoffman