爲什麼這個ul超過了div的大小？

儘管li.textmenu的寬度爲：140px，padding：5px，div.textmenu的寬度爲150px，但我迄今爲止所做的一個列表項目有一個很大的左邊距，並且超出了div的右邊緣一個好的30px。有人能解釋爲什麼嗎？爲什麼這個ul超過了div的大小？

http://www.briligg.com/frailty.html

CSS：

div.textmenu { 
    background-color: #3b3b3b; 
    float: left; 
    width: 150px; 
    margin: 30px 10px 0 30px; 
} 

li.textmenu { 
    background-color: #4a4a4a; 
    margin: 0; 
    padding: 5px; 
    border: none; 
    width: 140px; 
    list-style: none; 
    text-align: right; 
}

HTML：

<div class="textmenu"> 
    <ul> 
    <li class="textmenu"><a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a></li> 
    </ul> 
</div>

來源

2010-07-17 kim holder

嘗試使用類似螢火蟲的工具檢查頁面，該工具可顯示每個框的大小和邊距。也許某個盒子比你想象的要大，或者文本溢出盒子（檢查CSS「溢出」）。 – zvone 2010-07-17 02:22:54

你加一個zip /單重置你的CSS文件的頂部？

* { margin:0; padding:0; }

（把它放在CSS的最頂端以覆蓋瀏覽器默認邊距/填充）。

最有可能的ul被給予默認的填充/餘量，所以這是爲了反制它。

來源

2010-07-17 00:31:37

uni-reset？對不起，這是我的頭... – 2010-07-17 00:33:02

請參閱說明。 – 2010-07-17 00:33:46

哦。對。只需一秒鐘。 – 2010-07-17 00:35:53

確保ul不具有其自身的填充和利潤，通過與padding:0;margin:0;

來源

2010-07-17 00:34:53

這樣做可以節省我設置邊距和填充所有內容的需求，但是我已經將一般重置置於* {padding：0;邊距：0;}在CSS的開始。 – 2010-07-17 01:25:07

@briligg，請參閱http://meyerweb.com/eric/tools/css/reset/以獲得一般性好的重置（*不僅僅是邊距/填充..*） – 2010-07-17 01:58:52

上行重置它有margin和padding設置由瀏覽器。您將要刪除此：

div.textmenu ul {margin:0;padding:0;}

只有填充影響的寬度，但你可能會想摘下裕太。

來源

2010-07-17 00:39:12 user11977

它就像斯里登說的那樣。有全部 html元素預設樣式屬性。

我建議你通過埃裏克邁耶使用復位CSS：http://meyerweb.com/eric/tools/css/reset/

您可以在文檔的頂部包括它。之後，您可以更好地控制所需的樣式。

來源

2010-07-17 00:47:27 ChrisBenyamin

該版本進入了很多東西，我不認爲我需要這個複雜的網站......但它是一個有趣的資源。我要去查找更多'CSS重置'的東西。 – 2010-07-17 00:57:34

確保您已計算出您想要在Div中修復的Li的確切寬度和高度，方法是確保DIV內有足夠的空間。

div.textmenu { 
    background-color: #3b3b3b; 
    float: left; 
    width: 150px; 
    margin: 30px 10px 0 30px; 
    } 
    li.textmenu { 
    background-color: #4a4a4a; 
    margin: 0; 
    padding: 5px; 
    border: none; 
    width: 140px; 
    list-style: none; 
    text-align: right; 
    }

由於您製作了填充：5px，由Li的2xwidth +高度計算，Li應該超過Div框的150px寬度。你可以通過減少LI的填充像素來修復。

來源

2011-11-16 10:24:51

爲什麼這個ul超過了div的大小？

回答

相關問題