html - CSS 填充导航

Question

好吧，我正在尝试为我正在制作的网站创建标题，但我在为我的顶级导航填充一些链接时遇到了一些麻烦。

基本上发生的事情是，如果我有一个长链接名称，它会与另一个链接重叠。 我认为这与宽度有关，但我不确定如何修复它。我也真的不想为链接创建固定宽度，因为我想让链接中的每个文本与前一个文本相距 60 像素。

HTML:

<nav id="top_navigation">
    <a href="#">Home</a>
    <a href="#">Example1</a>
    <a href="#">Longtextjustbecause</a>
    <a href="#">Testpage3thingy</a>
</nav>

CSS:

#top_navigation a {
display: inline-block;
height: 60px;
color: #3b3b3b;
font-family: Hero;
font-size: 26px;
text-decoration: none;
line-height: 60px;
padding: 0px 30px; }

非常感谢任何帮助，谢谢!

Answer 1

是的，结果证明这是我出于某种原因使用的字体。它似乎在任何情况下都不太喜欢填充。