無序列表將無法在div內正確對齊

圖像位於列表項li之內，它位於div內的無序列表ul之內。

我遇到的問題是，當我做一個無序列表顯示內聯，它不像div應該左對齊，它開始大約40像素英寸我試圖設置position:absolute;left:0;在ul但它沒有什麼區別。

position:absolute;應該使其相對於其父元素對齊，但它不是這樣做的。

這是顯示問題的JSFiddle。

（紅色塊是div，它是紅色只是爲了告訴那裏的div一邊是所以你可以看到多遠關閉UL）

有我丟失的東西？爲什麼圖像在它應該在的位置右側開始40像素？

CSS

#navbar ul{ 
    position:absolute; 
    left:0px; 
    margin:0 0 0 0; 
    padding: 0 0 0 0; 
}

2013-05-14 02:51:55 npage

具體來說，我認爲這是填充 – Romski 2013-05-14 02:55:48

是的，我只是在清理他的邊緣。 – npage 2013-05-14 02:57:12

是的，問題是'ul'上的'padding-left'' – 2013-05-14 02:59:37

您需要添加填充：0;

#navbar ul{ 
    padding:0; 
}

而且，你可能要考慮這樣做兩件事情將引起你類似的問題：

1）繼承

繼承的東西在那裏，如果你不指定特定的值，它會簡單地從父母那裏獲取相同元素的價值。

2）CSS重置

所有瀏覽器都有自己的默認值某些事情。如果要完全控制，則要確保重置其中一些值。它很可能會影響您的網站加載速度。

2013-05-14 02:51:10

它爲我工作 – 2013-05-14 02:51:31

我認爲你應該使邊距和填充等於0.你試過嗎？ – 2013-05-14 02:53:22

是的，它不起作用。 – 2013-05-14 02:53:40

ul等列表有40像素padding-left默認情況下，在舊的IE是margin，所以只是刪除空白和邊距。

2013-05-14 03:37:21

回答