水平間距CSS菜單LI

我試圖讓每個<li>標記的框位置彼此相鄰而沒有空格，但是現在它們在每個框之間都有一個很大的空間。我如何刪除它？水平間距CSS菜單LI

HTML代碼：菜單

<div id="menucontainer"> 
    <ul id="menu"> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option1</a></li> 
    </ul> 
</div> 

</body> 
</html>

CSS代碼：

ul { 
margin: 0px; 
padding: 0; 
} 

#menu li { 
display: inline; 
list-style: none; 
} 
#menu li a { 
margin: 0px; 
padding: 5px 30px 5px 30px; 
text-align: center; 
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif; 
font-size: 15px; 
color: rgba(66,48,1,1); 
border: 1px solid rgba(105,181,50,1); 
background: rgba(122,199,67,1); 
} 
#menu li a:hover { 
cursor: pointer; 
background: rgba(178,232,139,1); 
color: rgba(0,0,0,1); 
} 
#menu a:link, #menu a:visited { 
color: rgba(255,255,255,1); 
text-decoration: none; 
} 
#menu a:active { 
color: rgba(250,191,12,1); 
} 
#menu a#current { 
background: rgba(85,137,48,1); 
}

來源

2014-06-28 Gemtastic

JsFiddle對我們來說很重要，可以確定您的問題。我猜，試着把你的''和下一個'

'並排放置，就像這個'

....

.....

' –

就像@hurrtz解釋的那樣，它是關於去除白色 - 空間..恕我直言，這更像是一個錯誤，瀏覽器如何生成這樣的列表..所以，只要記住這個技巧.. ^^ –

這些差距是空白字符。當您將光標移到其中一個空白處時，您可以看到它們 - 它會更改爲文本光標。

您可以通過

避免這種寫列表項在同一行，從而避免空白
浮動列表項，如下所示：

CSS：

#menu li { 
    display: inline; 
    list-style: none; 
    float: left; 
}

來源

2014-06-28 13:48:22 hurrtz

Btw：如果你想知道爲什麼你的列表元素重疊：這是因爲你給內聯元素（）填充頂部和填充底部。如果您也應用「display：inline-block」，這將只能正常工作。 – hurrtz

水平間距CSS菜單LI

回答

相關問題