爲什麼CSS設置相同的寬度爲2周的div但表現出不同的寬度

<!DOCTYPE html> 
<html> 
<head> 
<style>

這是導航的大小，其寬度爲50％爲什麼CSS設置相同的寬度爲2周的div但表現出不同的寬度

#navigation { 
    position: fixed; 
    top: 110px; 
    width: 50%; 
    left:50%; 
    margin-left:-25%; 
    background: #FFF; 
    z-index: 10000; 
    height: 60px; 
    opacity:0.7; 
    padding:0; 
    border-bottom:1px solid #ccc; 
} 

#navigation ul { 
    list-style: none; 
    padding:30px 0 0 0; 
    margin:0; 
} 

#navigation ul li { 
    font-weight:bold; 
    color:#3d3d3d; 
    float:left; 
    padding:0 20px 0 0; 
    margin:0; 
}

這是該寬度內容大小也是50 ％

#content { 
    position: relative; 
    width: 50%; 
    height: 100%; 
    top:180px; 
    left:50%; 
    height:800px; 
    margin-left:-25%; 
    background-color: #3d3d3d; 
    padding:0; 
} 
</style> 
</head> 

<body> 
<div id="navigation"> 
    <ul> 
     <li><a href="#">BUtton 1</a></li> 
     <li><a href="#">BUtton 2</a></li> 
      <li><a href="#">BUtton 3</a></li> 
     <li><a href="#">BUtton 4</a></li> 
    </ul> 
</div> 
<div id="content"></div> 
</body> 
</html>

我設置其是50％的導航和內容相同的寬度，但是當我在瀏覽器中打開它，這兩個框是不同的寬度，任何人都可以幫助我？

來源

2013-10-24 Vizi

不要使用填充，而是使用margin。另外，你可能想把所有的主div放在一個有寬度的容器中。 – jonosma

或使用'box-sizing：border-box'，以便填充不會影響整體寬度。（IE8＆up） –

只是一個註釋：'左：50％;保證金餘額：-25％;'與剩餘金額相同：25％;'。不妨讓事情變得簡單！ –

這是因爲當您在width中設置該元素所佔的百分比時，該元素將與其最接近的父級相關。

當您設置position:fixed爲#navigation這使得html他的父母，而#content採取body作爲他的父母。這裏的問題是，默認德html標籤具有padding值，現在使身體的HTML等於和50％的寬度等於設定這在你的CSS：

html, body { 
    margin:0; 
    padding:0; 
}

查看這裏的演示http://jsfiddle.net/cAtgd/3/

來源

2013-10-24 22:10:04 DaniP

在＃內容您例如改變CSS部分：

position: relative;

到：

position:absolute;

這是因爲在相對的div案件出現相對於它應該出現在文檔中。這意味着相對於你的情況的性質「#navigation」

雖然絕對格的情況下出現的位置正是你告訴它。不管前後有哪些其他元素。

來源

2015-02-02 07:48:40 Sadiq

爲什麼CSS設置相同的寬度爲2周的div但表現出不同的寬度

回答

相關問題