个人中心
gpt4 book ai didi

html - 为什么不显示 id ="header"的黑色？

转载 作者：行者123 更新时间：2023-11-28 15:27:44 25 4
gpt4 key购买 nike

我写了这段代码，所有的 div 都正常工作，导航也是。但是“标题”的黑色似乎不起作用。我已经在下面发布了整个代码。请看下面的代码。

<!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>

最佳答案

将overflow:auto添加到#header:

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

jsFiddle example

float 内容使父级表现得好像没有内容并且它折叠起来。添加溢出规则可恢复您寻求的行为。

关于html - 为什么不显示 id ="header"的黑色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24893527/

25 4 0
文章推荐： javascript - 将类添加到单击的导航链接的 AngularJS ng-click 函数
文章推荐： ios - 在 Swift 中使用自定义函数调用的 snackbar
文章推荐： python - 使用 CSS 自定义工具提示
文章推荐： html - 嵌入样式导致隐藏 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com