html - 为什么文本在列表元素中没有正确定位？

Question

这就是问题的样子：

这是标记：

                    <nav class="padding_bottom">
                        <ul>
                            <li><a class="selected" href="#">Home</a></li>
                            <li><a href="#">Music</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>

和造型：

nav {
    height: 100%;
}

nav li {
    font-size: 3em;
    letter-spacing: -4.5px;
    text-transform: uppercase;
}

nav li:nth-child(2), 
nav li:nth-child(3) {
    margin-left: .25em;
}

nav a {
    color: #dddddd;
}

nav a:hover, .selected {
    color: black;
}

我不知道为什么会这样。我已经使用了很多样式元素来查看是否有任何变化，但问题仍然存在。

Answer 1

@迈克尔皮特鲁克：

这是由 -ve 引起的letter-spacing，如果将其删除，则背景颜色会按预期扩展。<a>您可能只需要为元素添加一些最适合您的情况的填充或边距。

示例小提琴

Answer 2

请试试这个：

nav li {
    font-size: 3em;
    letter-spacing: -4.5px;
    text-transform: uppercase;
    padding: 10px;
    list-style:inside none;
    background-color:#CCC;
    display:inline-block;
}