Question

我一直试着弄清楚为什么我的导航栏的颜色没有显示出来。请看看下面的CSS，告诉我我做错了什么。

#header {
    position: relative;
    top: 20px;
    background-color: blue;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-color: #ffffff;
    overflow: hidden;
}

li {

    border: 2px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: black;
    border-radius: 5px 5px;
    margin-left: 5px;
    margin-right: 5px;
    display:inline;
    font-family: ubuntu;
    background-color: #e1e3e4;
    padding: 5px 5px 5px 5px;
    border-width: 1px;
}

#navbar {
    position: fixed;
    margin-top: 10px;
    left: 50%;
    margin-left: -200px;
}


body {
    background-color: #e1e3e4;
}

    p{
        font-family: ubuntu;

    }

这是文档的html：

    <!DOCTYPE html>

     <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css" href="css/hover.css" rel="stylesheet" media="all"/>
            <title>Palliative Care Toolkit</title>
        </head>

    <body id= "page">

        <div id="header">
        <div id="navbar">
        <ul>


            <li href="#" class="button grow">What is Palliative Care?</li>
            <li>Who Needs Palliative Care?</li>
        <li>Taking about Palliative Care?</li>
        <li>How to Interact with Providers?</li>
        <li>Additional Resources?</li>
        </ul>
            </div>
        <p style="display:inline; font-size:30px; margin-top: 20px; position:fixed; margin-left: 30px; "> Palliative Care ToolKit </p>

    </div>

非常感谢你的帮助！何

Answer 1

由于您的导航栏已position:fixed，因此它不再与#header相关联。这意味着#header表现得没有内容;这意味着它在高处坍塌。只需给#header一个高度，或者更改定位方法。

导航栏颜色未显示

1 个答案: