Question

当我尝试将背景设置为.header时，我遇到了问题 - 没有任何变化，请帮忙，我很困惑。

HTML 的

<div class='container'>
    <div class='header'>
        <div class='logo'></div>
        <div class='search'>
            <form class="search" method='post'>
                <input type='text' name='text'>
                <input type='submit' value='search'>
            </form>
        </div>
        <div class='utility'></div>
    </div>
  </div> <!-- excuse me i forgot to type </div> here in the post -->

CSS文件

html {
    background: #62B0FF;
}

body {  
    text-align:left;
    font: 13px /1.5 arial,helvetica,tahoma;
    color: black;
}

/* i wanted to put 120px free space
   to see background
   but nothing is there */

.container {
    width: 960px;
    margin:0 auto;
}

.header {     
    margin-bottom: 20px;
    background: black;
}

.logo {     
    width: 220px;
    float: left;
}

.search {    
    float: right;
    text-align: right;
    width: 620px;
}

.utility {
    width: 500px;
    float: right;
}

Answer 1

尝试将overflow: hidden添加到.header。如果您要浮动任何子元素（input，.logo，.search等），然后不清除它们，.header元素将不会展开以适合内容。

因此，.header元素的背景可能是red，但您无法看到它。

请参阅以下示例：

浮动，不清楚 - 显示您描述的行为

http://jsfiddle.net/qrS3u/

浮动，清晰 - 背景为红色

http://jsfiddle.net/qrS3u/1/

修改

有关浮动元素发生原因以及解决方法的更多信息，请查看this CSS-Tricks article

Answer 2

你刚刚失踪</div>。否则它的工作正常。

查看小提琴示例： http://jsfiddle.net/Znw7P/

Answer 3

您缺少一个结束div（“</div>”）标记。这可能是一个因素。

此外，您需要将CSS代码包装在<style>标记中。而不是最后三行，请使用：

<style type="text/css" media="screen">
    .header {
             background-color: red;
               }
</style>

Answer 4

您可以尝试更改CSS：

.header {
    background-color: red;
}

到此：

.header {
    background: red;
}

html容器背景问题

4 个答案: