如何擺脫CSS水平列表項目之間的空白？

我有以下測試頁和CSS。顯示時，每個列表項目之間有4px的間隔。我怎樣才能讓物品相鄰？如何擺脫CSS水平列表項目之間的空白？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  

<html> 
     <head> 
     <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" /> 
     </head> 

     <body> 
     <div> 
      <ul class="nav"> 
      <li class="nav"><a class="nav" href="#">One1</a></li> 
      <li class="nav"><a class="nav" href="#">Two</a></li> 
      <li class="nav"><a class="nav" href="#">Three</a></li> 
      <li class="nav"><a class="nav" href="#">Four</a></li> 
      </ul> 
     </div> 
     </body> 
    </html>

的CSS：

ul.nav, ul li.nav { 
    display: inline; 
    margin: 0px; 
    padding: 0px; 
} 

ul.nav { 
    list-style-type: none; 
} 

li.nav { 
    background-color: red; 
} 

a.nav { 
    background-color: green; 
    padding: 10px; 
    margin: 0px; 
} 

a:hover.nav { 
    background-color: gray; 
}

來源

2010-06-15 Curyous

您需要使用的li小號display:block和float:left刪除的空間。當他們內聯時，瀏覽器將它們視爲單詞，因此在兩者之間留下空間。

另請參閱my similar question。

來源

2010-06-15 08:48:14 Skilldrick

恐怕這也太髒了，但是如果有一個乾淨的解決方法，我會（驚喜地）感到驚訝。

把你所有的<li> s每行：

<li class="nav"><a class="nav" href="#">One1</a></li><li class="nav"><a class="nav" href="#">Two</a></li><li class="nav"><a class="nav" href="#">Three</a></li><li class="nav"><a class="nav" href="#">Four</a></li>

對不起。

來源

2010-06-15 09:07:52 teedyay

結合@Skilldrick和@teedyay，你有你的答案和解釋。
如果<li> s被視爲詞，那麼它們周圍的任何空白空間都會被濃縮爲一個空格。

所以我想這是一個看起來像一個錯誤的功能。

要刪除空間，請將所有<li> s放入鏈條中，並在它們之間沒有空白處。
OR
減少對<ul>字體大小爲0，並在<li>小號

來源

2010-06-15 11:01:17

減小字體大小並恢復它爲我做了竅門，謝謝 – kitschmaster 2012-01-28 16:46:18

我知道這個問題有點老了，但還有一個替代方案 - 在每個''和' - >後放置'<！ - ' '在每個'

'之前。請注意，我沒有說這是一個很好的解決方案！然而，與上述替代方法相比，它已成爲我的首選方法。 – ClarkeyBoy 2013-06-16 19:58:40

向左浮動也有效，但對我來說有不良副作用。字體大小爲零的技巧。謝謝 – nest 2014-11-19 08:13:50

您還可以設置font-size:0爲<ul>標籤恢復大小。

來源

2011-11-08 08:56:11 killebytes

抱歉，沒有完全閱讀@David的答案。 – killebytes 2011-11-08 08:57:35

對我來說是更好的解決方案 – wutzebaer 2013-09-30 10:51:13

瀏覽器支持情況如何？我已經在某處讀過，它在IE <= 7時不起作用 – 2014-05-12 03:24:26

如何擺脫CSS水平列表項目之間的空白？

回答

相關問題