如何解决导航栏文字旋转后hover背景存在缝隙的问题

问题：制作导航栏时，对链接文字添加了旋转效果，但鼠标悬停时，链接背景会随文字旋转，导致出现原背景色的缝隙，需要让这些缝隙区域也显示黑色背景。

解决方案思路 #

直接对<a>标签应用transform: rotate会让整个链接元素的盒模型跟着旋转，悬停时的黑色背景是旋转后的矩形，无法覆盖原链接区域的全部空间，从而产生缝隙。正确的做法是只旋转链接内部的文字内容，让<a>标签本身保持原始的布局尺寸，这样悬停时的黑色背景就能填满整个链接区域。

修改后的代码 #

HTML 部分

<header>
  <nav class="navbar">
    <a href="#"><span>Domů</span></a>
    <a href="#"><span>O nás</span></a>
    <a href="#"><span>Služby</span></a>
    <a href="#"><span>Galerie</span></a>
    <a href="#"><span>Kontakt</span></a>
  </nav>
</header>

CSS 部分

.navbar {
  background-color: chocolate;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 5em;
  line-height: 70px;
}

/* 导航栏链接基础样式 */
.navbar a {
  color: white;
  padding: 0;
  text-decoration: none;
  font-size: 1.25em;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 旋转内部文字 */
.navbar a span {
  transform: rotate(-10deg);
}

/* 鼠标悬停样式 */
.navbar a:hover {
  background-color: black;
  color: white;
}

关键修改点说明 #

• 给每个<a>标签内部新增<span>标签，单独承载文字内容
• 将旋转效果从<a>标签转移到内部<span>，仅让文字旋转，不改变链接本身的盒模型
• 给<a>标签添加flex布局属性，保证旋转后的文字在链接区域内居中对齐
• 修正padding: auto的无效写法，改为padding: 0

这样修改后，悬停时<a>标签的黑色背景会覆盖整个分配的区域，不会再出现缝隙，同时文字保持旋转效果。

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