如何在导航栏下方无缝放置圆角按钮并修复按钮垂直排列问题

解决方案 #

核心修改点：

1. 清除列表默认边距，给按钮列表设置flex布局实现横向排列，两个按钮均分宽度
2. 给按钮容器设置和导航栏匹配的绝对定位，顶部对齐导航栏底部，实现无间隙贴合
3. 补充按钮圆角、选中态样式匹配目标效果

完整代码

新增CSS样式

/* 清除列表默认边距 */
.btn-navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  width: 100%;
}
/* 按钮项均分宽度 */
.btn-navbar ul li {
  flex: 1;
  text-align: center;
}
/* 按钮基础样式 */
.btn-navbar .nav-border {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: #264653;
  background: #fff;
  border: 1px solid #264653;
}
/* 匹配目标圆角效果 */
.btn-navbar ul li:first-child .nav-border {
  border-bottom-left-radius: 8px;
}
.btn-navbar ul li:last-child .nav-border {
  border-bottom-right-radius: 8px;
}
/* 选中态样式 */
.btn-navbar .ui-btn-active {
  background: #264653;
  color: #fff;
}
/* 按钮容器定位，和导航栏完全对齐无间隙 */
.btn-navbar {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

调整后的HTML结构

<!-- 原有导航栏代码保持不变 -->
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:90%; height:14% ">
  <div class="container-fluid">
    <span class="navbar-brand" style="display:flex;">
      <img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
       <span style="font-size:25px;color:white;"><span style="color:#e9c46a">My City Name</span><br />My Company Name</span>
    </span>
  </div>
</nav>
<!-- 新增类名的按钮代码 -->
<div class="btn-navbar" data-role="navbar">
  <ul>
    <li> <a href="#" class="ui-btn-active nav-border" id="viewtherecent"> Recent </a> </li>
    <li> <a href="#" class="nav-border" id="viewthefrequency"> Frequent </a> </li>
  </ul>
</div>

补充优化建议

如果后续页面还有其他内容，可给页面外层容器添加padding-top: calc(14% + 48px)（48px为按钮高度，可根据实际调整），避免内容被绝对定位的导航和按钮遮挡。如果需要更好的多设备适配，可将导航栏的height:14%改为固定高度如100px，同步将按钮容器的top:14%改为top:100px，样式稳定性更高。

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