我正在尝试编写一个横跨整个页面的导航栏，其中的按钮仅占导航栏的 60%。我不确定为什么我看不到背景。任何帮助将不胜感激
这是 HTML:
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">site</div>
<div id="navbar">
<div id="navbarcontainer">
<ul id="navul">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Dogs</a></li>
<li><a href="contact.html">About us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="contentp">
<h2>About BTCWA</h2>
<table><tr><td><p></p></td><td></td></p><tr></table>
</div>
</div><!--contentp-->
</div><!--content-->
<div id="footer"></div>
</div><!--Wrapper-->
</body>
</html>
这是 CSS:
@charset "utf-8";
*{margin:0px;}
html{height: 100%;}
body {height: 100%;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
padding:0px;
}
#wrapper
{
margin:auto;
width: 100%;
}
#header
{
text-align:center;
height:100px;
background:#bbb;
}
#logo
{
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:50px;
height:100%;
margin:auto;
}
#content
{
margin:auto;
color:#444;
height:100%;
padding:50px 30px 30px 30px;
background:#eee;
font-size:18px;
}
#contentp
{
text-align:left;
margin:auto;
width:60%;
height:100%;
padding:50px 30px 30px 30px;
background:#eee;
font-size:18px;
}
#navbar
{
height:50px;
width:100%;
background:#707070;
}
#navbarcontainer
{
height:50px;
margin:auto;
width:60%;
overflow:hidden;
position:relative;
}
#navbar ul
{
margin:0px;
padding:0px;
list-style-type:none;
}
#footer
{
postion:fixed;
bottom:0px;
left:0px;
width:100%;
height:100px;
margin:auto;
background:#707070;
}
#footerblock
{
padding:50px 30px 30px 30px;
width:15%;
text-align:center;
height:100%;
color:#39F;
display:inline-block;
background:#444;
list-style:none;
padding:10px;
}
最佳答案
您的上下文 DIV 与您的导航栏重叠。 所以尝试将 Nav bar 放在 content dic 中，像这样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bull Terrier Club Of WA</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">site</div>
</div>
<div id="content">
<div id="navbar">
<div id="navbarcontainer">
<ul id="navul">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Dogs</a></li>
<li><a href="contact.html">About us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div id="contentp">
<h2>About BTCWA</h2>
<table>
<tr>
<td>
<p>
</p>
</td>
<td>
</td>
</p>
<tr>
</table></div>
</div><!--contentp-->
</div><!--content-->
<div id="footer"></div>
</div><!--Wrapper-->
</body>
</html>
在此之后您可能需要在样式和 html 中做一些修改，因为您的页面在当前样式下看起来不太好
关于html - Div 在导航栏上没有背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17909342/