为什么身体不会变成我指定的宽度？

为什么这个样品表，身体没有指定的宽度？为什么身体不会变成我指定的宽度？

<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

为什么身体不会变成我指定的宽度？

回答

相关问题