CSS实现导航栏激活态背景宽度超出文本的方法

问题核心是激活态背景用width硬编码无法适配文本宽度，想要实现背景比文本略宽的左右留白效果，最直接的方案是用**内边距（padding）**替代固定宽度：

修改后的CSS代码 #

.NaviBarDiv {
  background-color: #282c34;
}
.active-scroll-spy {
  height: 4ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  /* 添加左右内边距，实现背景比文本宽的自适应效果 */
  padding-left: 1.2em;
  padding-right: 1.2em;
  /* 确保文本垂直居中 */
  display: flex;
  align-items: center;
}
.nav-link {
  margin-left: 1em;
  margin-right: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

原理说明 #

• 用padding-left和padding-right替代固定width：内边距是在文本两侧添加空间，会自动跟随文本宽度调整，不管导航文本是长是短，背景都能保持比文本宽出指定的留白，完全适配需求。
• 保留display: flex和align-items: center：确保文本在背景块内垂直居中，和你原有的布局逻辑一致。

这样修改后，激活态的背景就会像你期望的那样，左右留有空白且自适应文本宽度，无需硬编码任何固定数值。

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