@MichaelPitluk:
It's caused by the -ve letter-spacing
, if you remove it then the background color extends as expected. You may just need to add some padding or margin, whichever works best for your situation, to the <a>
elements.
题
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:
It's caused by the -ve letter-spacing
, if you remove it then the background color extends as expected. You may just need to add some padding or margin, whichever works best for your situation, to the <a>
elements.
其他提示
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;
}