Question

我已编写此代码，所有div都正常工作，导航也是。但是＆＃34;标题的黑色＆＃34;似乎不起作用。我已经发布了下面的全部代码。请看下面的代码。

<!DOCTYPE html>
<html>
<head>
<style>

body
{
    padding: 0;
}
#container
{
    margin: 0 auto;
    width:100%;
    height: 1500px;
    padding: 0px;
}

#header
{
    background-color: black;    
    margin: 0px;
}

#logo
{
    background-color: green;
}

#headTable
{
    float:right;
}

#logo
{
    margin: 5px 0px 5px 70px;
    float: left;
    width:150px;
    height:100px;
}

#headTable ul
{
    list-style-type: none;
    margin: 0;
}

#headTable ul li
{
    color: black;
    float: left;
    margin: 10px 50px;
}

#nav
{
    clear: both;
    width:100%;
    height: 100px;
    background-color: purple;
}

#nav ul
{
    margin-left: 100px;
    padding: 0;
}

#nav ul li
{
    display: block;
    margin: 10px;
    padding: 20px;
    float: left;
}



</style>
</head>

<body>

<div id="container">
    <div id="header">
        <div id="logo"> 
            <img src="plane.jpg" width="150" height="100">
        </div>
        <div id="headTable">
            <ul>
                <li>Google</li>
                <li>Google</li>
                <li>Google</li>
            </ul>   
         </div>
    </div>

        <div id="nav">
            <ul>
                <li>Menu</li>
                <li>Blog</li>
                <li>Ins</li>
                <li>BBC</li>
                <li>Contact</li>
                <li>Others</li>
            </ul>       
         </div>

    <div id="content">   

        <div id="page">
            <p>This is a paragraph that should
            stay intact inside the id of Page.
            </p>    
        </div>

        <div id="top">
            <p>THis is a paragraph that should
            stay intact inside the id of top.
            </p>
        </div>

        <div id="low">
            <p>This is a paragraph that should
            stay intact inside the id of bottom.
            </p>    
        </div>

    </div>
</div>              

</body>
</html>

Answer 1

将overflow:auto添加到#header：

#header {
    background-color: black;
    margin: 0px;
    overflow:auto;
}

<强> jsFiddle example

浮动内容会使父母表现得好像没有内容而且会崩溃。添加溢出规则会恢复您寻找的行为。

Answer 2

因为此上下文中的#header没有定义的大小，因为它包含的唯一元素具有浮点数。

解决这个问题的三种简单方法：

明确定义#header的维度。
将display:inline-block添加到#header。
在#header中的两个浮动元素后使用clearfix。这通常是使用<div style="clear:both;"></div>

Answer 3

你必须放一些＆＃34;身高＆＃34;你在CSS中的#header标签。祝你好运！

Answer 4

我创建了一个jsfiddle：http://jsfiddle.net/JsA7y/ 所以，我当然可能和你有同样的“问题”; img src指向哪里（在jsfiddle中）？你的img指向哪里？
？ img与你的html在同一个目录中吗？ =＆GT;另外，你需要使用正确的uri;
例如，如果img位于与html相同级别的目录中：

<img src="directory/plane.jpg" width="150" height="100">

... 希望这会有所帮助。

为什么不是id =＆＃34;标题＆＃34;的黑色。没有显示？

4 个答案: