爲什麼文本沒有在列表元素中正確定位？

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

我可以;噸找出原因這發生了。我玩過很多造型元素，看看是否有任何改變，但問題依然存在。

來源

2013-07-22 Michael Pitluk

這是在線，所以我們可以看看？ –

如果問題是E太靠右了，可以在'nav li'下使用'padding-right：5px'來確保文本不超過背景。 –

它是由-ve'letter-spacing'引起的，如果你刪除它，那麼背景顏色將按照預期延伸。您可能只需要添加一些填充或邊距，以適合您的情況爲準，以''元素爲準。 [小提琴]（http://jsfiddle.net/emgee/SAzH5/） – emgee

@MichaelPitluk：

它是由-ve letter-spacing引起的，如果你刪除它，然後按預期的背景色延伸。您可能只需要添加一些填充或邊距，以適合您的情況爲準，以<a>元素爲準。

Example Fiddle

來源

2013-07-22 15:49:19 emgee

試試這個請：

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

來源

2013-07-22 03:09:34 GilbertOOl

爲什麼文本沒有在列表元素中正確定位？

回答

相關問題