CSS表比表设置宽

Question

为什么这个页面（http://calvoter.org/issues/votereng/votebymail/study/findings.html）如此宽广。带有白色背景的表格顶部有一个750px的图像，但页面比所需的页面宽。我制作了一份副本并删除了内容中的所有图像/表格，页面仍然比它需要的更宽。文本已从Word文档复制到textwrangler，然后再复制到Dreamweaver

finds.html页面来自与http://calvoter.org/issues/votereng/votebymail/study/ocprofile.html相同的模板，它没有额外的宽度问题。谢谢你的帮助。

该页面是使用Dreamweaver CS5.5制作的

Answer 1

基本上，它来自糟糕的编码实践。您已将所有内容括在块引号内，因此您在此处有两个路径：只需将其添加到样式表

即可

blockquote{margin:0;}

这里的问题是你实际上会丢失blockquote格式，但如果你不关心它，它会立即解决你的问题。您还可以添加保证金：5px或类似的东西。

最好的方法是简单地“杀死”那些块引用元素，然后仅在它们打算使用时使用。最简单的方法是使用原始文本编辑器（如记事本，非WORD！）打开源代码，并替换任何出现的<blockquote>和</blockquote>。甚至更好：将<blockquote>替换为<div>，将</blockquote>替换为</div>（先备份！）。这将为你解决。

Answer 2

因为你没有设置主要部分：<blockquote>的宽度，它的宽度会改变并放大<table>的宽度。
首先，将<blockquote>的宽度设置为在main.css第134行继承：

div#main blockquote {
    font-family: sans-serif;
    font-style: normal;
    width:inherit;             /* add this to control blockquote's width */
}

然后，更改一些标题和img，它们是blockquote变得太大的主要原因，如下：

此处无需嵌套<blockquote>，删除它们。

最后，给出<img>的合理位置，如下所示：

设置hspace不是一个好习惯，你只需更改它或设置兼容的css样式。你可以在这里删除这个属性

如果有任何帮助，请告诉我。

<强>更新
实际上，如果你在<blockquote>中很好地控制元素，你就不需要设置它的宽度。但是如果你想达到你的期望，你最好这样做。

Answer 3

您的table宽度为970像素。它正在伸展以容纳您在其中一个表格单元格中的图像。图像是

<img src=​"graphics/​uncounted_ballots.png" width=​"690" height=​"253" hspace=​"100">​

这占据了890像素的宽度。这是在blockquote内，两边的边距为40。全部添加就可以获得970像素。解决这个问题的难点在于我们尝试使用更好的编码实践。你的HTML是嵌套表和块引用的迷宫，这使得几乎不可能破译。