[英]Why is text not positioned properly within list element?
This is what the problem looks like: 问题是这样的:
Here is the mark up: 这是标记:
<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>
And the styling: 以及样式:
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;
}
I can;t figure out why this is happening. 我不知道为什么会这样。 I've played around wiht a lot of the styling elements to see if anything changed, but the problem persisted.
我尝试了很多样式元素,以查看是否有任何更改,但是问题仍然存在。
@MichaelPitluk: @MichaelPitluk:
It's caused by the -ve letter-spacing
, if you remove it then the background color extends as expected. 这是由-ve
letter-spacing
引起的,如果将其删除,则背景颜色会按预期扩展。 You may just need to add some padding or margin, whichever works best for your situation, to the <a>
elements. 您可能只需要在
<a>
元素上添加一些填充或边距,以最适合您的情况。
Try this please : 请尝试这个:
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.