我一直在苦思冥想，想弄清楚为什么我的导航栏的颜色没有显示出来。请查看以下 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>
非常感谢您的帮助! 何塞
最佳答案
因为你的导航栏有 position:fixed，它不再相对于 #header 定位。这意味着 #header 就像没有内容一样；这意味着它的高度坍塌了。简单地给#header一个高度，或者改变定位方式。
关于html - 导航栏颜色不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22389810/