爲什麼身體不會變成我指定的寬度？

爲什麼這個樣品表，身體沒有指定的寬度？爲什麼身體不會變成我指定的寬度？

<html> 
<head> 
    <style type="text/css"> 
    table{ 
border-collapse:collapse; 
    } 
    table,th, td{  
     border: 4px, solid; 
    } 

    #article{ 
background-color: #FDF8AB; 
border: 3px solid #85A110; 
width: 760px; 
margin-top: 20px; 
margin-left: auto; 
    margin-right: auto; 
    } 
    </style> 
</head> 
<body id="article"> 
<div> 
<table> 
<tr> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Date</th> 
    <th>Notes</th> 
</tr> 
<tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>20-12-2013</td> 
    <td>AAAa</td> 
</tr> 

<tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>20-12-2013</td> 
    <td>AAAa</td> 
</tr> 

<tr> 
    <td>Eve </td> 
    <td>Jackson</td> 
    <td>20-12-2013</td> 
    <td>AAAa</td> 
</tr> 

<tr> 
    <td>John </td> 
    <td>Doe</td> 
    <td>20-12-2013</td> 
    <td>AAAa</td> 
</tr> 

<tr> 
    <td>Adam </td> 
    <td>Johnson</td> 
    <td>20-12-2013</td> 
    <td>AAAa</td> 
</tr> 


</table> 

</div> 

</body> 
</html>

來源

2013-05-11 Jim

在這裏看起來很好 - http://jsfiddle.net/wWY7m/ – lifetimes 2013-05-11 20:27:00

@Zenith：你什麼意思是好的？身體覆蓋所有的瀏覽器，但我已經把「自動」和「寬度」設置爲「760px」。我預計它會在瀏覽器窗口的中間位置居中 – Jim 2013-05-11 20:28:24

不確定它是否是拼寫錯誤，但在代碼中，您在關閉表之前關閉div。 – j08691 2013-05-11 20:28:27

你，當你不使用任何背景顏色爲您html元素使用

#article { 
    background-color: #FDF8AB; /* Other Styles */ 
}

那麼，接下來的父級元素是body，所以你感到困惑，提供一個背景色爲html元素，你會看到不同

Demo

我Suggestio N：

你不應該使用fixed寬度body標籤，讓它成爲width: 100%;它，默認情況下，因爲它是一個塊級元素，相反，包住table容器div內，使用固定的寬度和汽車利潤率這個div這將給你想要的效果，並在一個整潔的方式

The Right Way

來源

2013-05-11 20:33:48

我加了'html { background：#fff; 「但是沒有任何變化（儘管你說的是有道理的）。 – Jim 2013-05-11 20:38:55

@Jim不要調整身體大小，而是嵌套一個子元素，並使用具有自動邊距的固定寬度，請參閱演示:) – 2013-05-11 20:39:29

：好的我會看演示，但是怎麼會是您的第一個小提琴比我的小提琴不同？我發現你的html的周圍顏色是白色的，這對我來說不會發生。 – Jim 2013-05-11 20:41:21

你應該p將身體內的所有物品都劃分爲一個div或部分容器/包裝物。您可以在包裝上定義一個寬度。您將樣式應用於文本對齊中心的正文。以便div＃容器或section＃內容具有定義的寬度和邊距：0 auto ;.

另外，如果你有一個3px的邊框，你的寬度爲寬度+邊框左邊框+右邊框。這就是額外的6個像素來自哪裏。

來源

2013-05-11 20:43:07

添加'body {text-align：center; }'但不起作用 – Jim 2013-05-11 20:50:14

你的容器/包裝必須有一個定義的寬度和一個邊距：0 auto使它在頁面上居中。它不是你需要設置寬度的身體，它是容器。 – 2013-05-12 02:48:35

爲什麼身體不會變成我指定的寬度？

回答

相關問題