爲什麼header大於870px？

我有以下頁面：爲什麼header大於870px？

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="css/common.css"> 
    <link rel="stylesheet" href="css/index.css"> 
</head> 

<body> 
    <div id="page"> 
     <div id="header"> 
      <ul id="menu"> 
       <li class="products"> 
        <a href="products.html">Products</a> 
       </li> 
       <li class="resume"> 
        <a href="resume.html">My resume</a> 
       </li> 
       <li class="blog"> 
        <a href="blog.html">Blog</a> 
       </li> 
       <li class="about"> 
        <a href="about.html">About</a> 
       </li> 
      </ul> 
     </div> 
     <div id="main"> 
     </div> 
     <div id="footer"> 
     </div> 
    </div> 
</body> 

</html>

Index.css：

#page { 
    width: 1024px; 
    height: 900px; 
    margin:0 auto; 
} 

#header { 
    width:870px; 
} 

#menu { 
    border-bottom: 1px solid #EEEEEE; 
    border-top: 1px solid #EEEEEE; 
    clear: both; 
    list-style-type: none; 
    margin: 20px 0; 
    overflow: hidden; 
    padding: 11px 0 11px 34px; 
    width: 870px; 
} 

#menu li { 
    float: left; 
} 

#main { 

} 

#footer { 
    width:870px: 
}

Common.css：

body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
} 

a { 
    text-decoration:none; 
}

Firebug的測試，我看到#header是870px，但#menu大於#header。

我已禁用菜單樣式的邊距和填充，結果相同。

爲什麼#menu比870px大？

我希望邊框線的長度爲870px。

來源

2011-10-26 VansFannel

設置width到834px由於#menu被包含在其內部具有870的

width像素

這增加至870 + 34 = 904個像素

padding-left 。

的#menu元件870的設置寬度 - 34 = 836個像素（width:836px;）將使其完全適合..

來源

2011-10-26 10:10:43

但是接下來是從邊界2px應該考慮到，推出了另一個2px的寬度。除了桌子外，邊界總是在外面。 – rickyduck

@rickyduck，他只定義了頂部/底部的邊界.. :) –

D'oh ..trueché，我的壞！ – rickyduck

#menu { 
    border-bottom: 1px solid #EEEEEE; 
    border-top: 1px solid #EEEEEE; 
    clear: both; 
    list-style-type: none; 
    margin: 20px 0; 
    overflow: hidden; 
    padding: 11px 0 11px 34px; 
    width: 870px; 
}

是36px大於870px。在#menu

來源

2011-10-26 10:09:51 rickyduck

感謝您的回答。這些36px從哪裏來？ – VansFannel

你有34px的填充權，然後是1px的邊界左邊界和右邊界邊界; – rickyduck

@rickyduck ...邊界是頂部/底部..不是左/右.. –

由於它具有填充。填充將爲您的寬度添加額外的34像素。如果你想菜單是870px，你必須改變寬度爲836px。

如果您將#menu更改爲這些屬性，您將擁有自己想要的。

#menu { 
    border-bottom: 1px solid #EEEEEE; 
    border-top: 1px solid #EEEEEE; 
    clear: both; 
    list-style-type: none; 
    margin: 20px 0; 
    overflow: hidden; 
    padding: 11px 0 11px 34px; 
    width: 836px;

}

來源

2011-10-26 10:10:49 nheinrich

您設置的寬度就像是在一個盒子裏的項目。你有內容的寬度（對應於你設置的寬度），然後是填充，然後是邊框（框），然後是邊距。在上面的代碼中，你已經設置了填充和邊框，兩者都會添加到元素的可見大小。

來源

2011-10-26 10:11:47 Jim

#menu是不是大於870px，它等於按要求。

ul有一個填充。

將padding-left: 0;加入您的#menu CSS或減小#menu寬度。

來源

2011-10-26 10:13:54

他已經定義了填充爲'＃menu'這是'ul' – rickyduck

@rickyduck他聲明瞭'padding：11px 0 11px 34px;'so '填充左：34px'。需要'填充 - 左：0;'來#menu CSS或減少#menu寬度 –

爲什麼header大於870px？

回答

相關問題