Question

我使用的Web应用程序遇到了一个非常令人沮丧的问题（我最初没有编写它）。它使用框架进行足够的布局。我遇到的问题是所有具有背景颜色和通过CSS设置边框的元素默认为100％宽度。我刚刚测试了div元素，段落元素等。

我完全删除了样式表，然后对其进行了测试，我遇到了同样的问题，因此不是导致问题的样式表。

我写了一个快速测试，以确保它不是冲突的代码并使用与我们相同的doctype和xmlns - 我遇到了同样的问题。这是示例代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

有什么想法吗？

Answer 1

我认为这是HTML / CSS所必需的。块元素会扩展整个宽度，除非有什么东西可以阻止它们。

（FF具有相同的行为。）

Answer 2

这不是因为元素有一个背景或边框，它与父元素一起扩展到完整，这是因为它是一个块元素。背景或边框只是让你看到元素有多大。

默认宽度实际上不是“100％”，而是“自动”。实际的区别在于包含边框的元素使用100％的宽度，而不是宽度不包括宽度的100％（使宽度包括边框比它的父级更宽）。

如果您不希望元素使用可用宽度，则可以将其设置为浮动元素。然后它会调整自己的内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

Answer 3

正如Richard和BeefTurkey所说，div是块元素，将填充浏览器的宽度。

您可以使用内联元素，例如span

<span id="test">
    Test information!
</span>

或为div添加一些样式以强制它为内联

div#test { display: inline; }

Answer 4

不要将div默认为100％（父母大小），因为它们是块？您可以随时尝试将显示更改为内联：#test {display：inline;}

IE7将元素默认为100％宽度

4 个答案: