在CSS3中过长时间

Question

我无法弄清楚为什么它比左侧的文字更长。其余的菜单项也一样。

这就是我的上线。

Fiddle

这是列表的HTML：

<ul class="menu">
    <li><a href ="index.html">Home</a></li>
    <li><a href="#">About stuff</a></li>
</ul>

这里是相应的CSS：

ul.menu {
    list-style-type: none;
    text-align: center;
    text-color: 000000;
    word-spacing: 0.3em;
    letter-spacing: 0.5em;
    line-height: 120%;
    text-decoration: overline;
    text-transform: lowercase;
    text-shadow: 0.04em 0.04em #000000;
}

Answer 1

从text-decoration: overline;移除ul.menu并将其放入li。

请参阅我的代码：

ul.menu {
    list-style-type: none;
    text-align: center;
    text-color: 000000;
    word-spacing: 0.3em;
    letter-spacing: 0.5em;
    line-height: 120%;
    text-transform: lowercase;
    text-shadow: 0.04em 0.04em #000000;
}

li {
    text-decoration: overline;
    display: inline-block;
}

<ul class="menu">
    <li><a href ="index.html">Home</a></li>
    <li><a href="#">About stuff</a></li>
</ul>