border-bottom大于文本

我想知道是否有人可以帮助我。我的边框底部显示的长度比它强调的文字长，我只是希望它与文本的长度一致。
您可以在图片中看到它的外观： Picture border-bottom大于文本

我什么都试过，我不知道我在做什么错了，任何建议将是巨大的！谢谢

这里是我的代码：

.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; 
    } 
}

}

来源

2017-03-09 Jean-Luc B

发表您的HTML，也让我们有一个[MCVE] –

你有填充？在李还是一个？ –

@ElDanielo有填充，当我删除它时，它可以工作，但菜单项目彼此太接近了！ –

找到了解决办法！它只是将填充更改为边距，并且完美运行，感谢您的帮助，它确实帮助我找出了错误。

来源

2017-03-09 21:27:16

更换您padding上a元素与margin（同一值，但利润率而不是填充）

来源

2017-03-09 21:49:21 Johannes

border-bottom大于文本

回答

相关问题