Question

我想知道是否有人可以帮助我。我的边框底部看起来比它下划线的文字更长，我只是希望它适合与文本相同的长度。
你可以在图片中看到它的外观： Picture

我尝试了一切，我不知道我做错了什么，任何建议都会很棒！谢谢

这是我的代码：

.navigation {
text-align: center;
margin-top: 0px;
width: 100%;
font-size: 40px;

li.active-link>a{
 text-decoration: none;
 color: $accent-color;

ul {
  margin: 0;
  padding: 0;
}

}

 li {
  position: relative;

  &:hover > a {
    color: #1836a9;
  }

  a:hover {
    color: #1836a9;
    border-bottom: 4px solid #1836a9;
    margin-bottom: -5px;
    display: inline
  }
    }

a {
  display: inline;
}
  }

  .has-dropdown {

&.active {
  > a {
    position: relative;
  }

  > ul {
    display: block;
  }
}

}

Answer 1

将padding元素上的a替换为margin（相同的值，但边距而不是填充）

Answer 2

找到解决方案！它只是将填充更改为边距并且它工作得很好，谢谢你的帮助它确实帮助我弄清楚出了什么问题。

边界底部比文字大

2 个答案: