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

时间:2013-07-22 02:36:24

标签: html css list text-alignment

这就是问题所在:

enter image description here

这是标记:

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

我可以理解为什么会这样。我玩了许多造型元素,看看是否有任何改变,但问题仍然存在。

2 个答案:

答案 0 :(得分:1)

@MichaelPitluk:

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

Example Fiddle

答案 1 :(得分:0)

请试试这个:

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