[英]Why is text not positioned properly within list element?
问题是这样的:
这是标记:
<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;
}
我不知道为什么会这样。 我尝试了很多样式元素,以查看是否有任何更改,但是问题仍然存在。
@MichaelPitluk:
这是由-ve letter-spacing
引起的,如果将其删除,则背景颜色会按预期扩展。 您可能只需要在<a>
元素上添加一些填充或边距,以最适合您的情况。
请尝试这个:
nav li {
font-size: 3em;
letter-spacing: -4.5px;
text-transform: uppercase;
padding: 10px;
list-style:inside none;
background-color:#CCC;
display:inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.