水平內嵌列表填充

Question

我有一個水平的HTML內聯列表，用於導航，我想刪除列表項之間的填充。這是因爲每個盒子裏面都有圖像需要觸摸。

我已經嘗試爲導航容器和列表本身設置邊距/填充爲0，但它不起作用。任何人都可以看到我要去哪裏嗎？

HTML：

<div id="navwrapper"> 
      <ul id="navlist"> 
       <li><a href="#"><img src="images/nav/about.png" /></a></li> 
       <li><a href="#"><img src="images/nav/gigs.png" /></a></li> 
       <li><a href="#"><img src="images/nav/music.png" /></a></li> 
       <li><a href="#"><img src="images/nav/facebook.png" /></a></li> 
      </ul> 
     </div> 

CSS：

#navwrapper { 
width: 100%; 
height: 26px; 
margin: 0; 
padding: 0; 
} 

#navwrapper ul { 
text-align: right; 
margin: 0; 
padding: 0; 
} 

#navlist { 
height: 26px; 
margin: 0; 
padding: 0; 
} 

#navlist li { 
display: inline; 
list-style-type: none; 
margin: 0; 
padding: 0; 
background-color: #000000; 
} 

謝謝！

閃耀*

Answer 1

其實，這是因爲你有<li>的被格式化爲空間之間的新線路。簡單地把所有這些標籤在你的代碼在同一行，像這樣：

<li></li><li></li>

..rather比..

<li></li> 
<li></li> 

Answer 2

float的li的：

http://jsfiddle.net/durilai/g7KRe/

Answer 3

所有現代瀏覽器都可以通過'ins幫助你找到這種問題pect元素'功能。 （如果您使用Firefox，您需要FireBug插件）。

瀏覽器會顯示應用於每個元素的樣式以及填充的來源。

習慣於在瀏覽器中檢查元素將比從某人獲得關於此特定問題的幸運猜測更有用。

Answer 4

您可以根據需要浮動列表。這裏有一個示例更新到CSS應該工作，假設沒有其他問題與框模型：

#navwrapper { 
    width: 100%; 
    height: 26px; 
    margin: 0; 
    padding: 0; 
    clear: right; /* clear the children that are floated right */ 
} 

ul#navlist { 
    float: right; /* float all of this to the right */ 
    list-style: none; 
    height: 26px; 
    margin: 0; 
    padding: 0; 
    clear: left; /* clear the children that are floated left */ 
} 

ul#navlist li { 
    float: left; /* float the box left, so we can set margin/padding */ 
    margin: 0; 
    padding: 0; 
    background-color: #000000; 
}