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

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

@MichaelPitluk：

它是由-ve letter-spacing引起的，如果你删除它，那么背景颜色会按预期延伸。您可能只需要为<a>元素添加一些填充或边距（以最适合您情况的方式）。

Example Fiddle

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