[英]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.