我的网站上有一个简单的导航栏，只使用 HTML 和 CSS。导航栏的外观和功能与其应有的一样，但图像和实际导航栏之间有一个空间。我希望导航栏位于图像的正下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
<a href="crossfitvillains.com">CrossFit Villains</a>
</span>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
<nav>
<ul id="menu" class="black">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Daily News</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Class Sign In</a></li>
</ul>
</nav>
body {
background-image:url('dark_leather.png');
font-family: arial;
color: white;
margin-left: 15%;
}
.title {
font-size: 90px;
font-family: "Space Ranger";
text-decoration: none;
}
#address {
font-size: 18px;
text-decoration: none;
color: white;
}
#email {
text-decoration: none;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: none;
color: grey;
}
#container {
float:left;
vertical-align: top;
}
.image-section{
float:left;
padding: 0 10px;
}
.cb{
clear: both;
}
.image-title {
padding-left: 50px;
}
footer {
padding-left: 10px;
color: white;
background-color: #333;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
#footertext {
margin-left: 15%;
}
#menu {
text-transform: uppercase;
margin: 50px 0;
padding: 0 0 0 10px;
list-style-type: none;
font-size: 13px;
background: #eee;
height: 40px;
width: 1280px;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu.black {
border-top: 2px solid #333;
border-left: 2px solid #333;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
background: #333;
}
#menu.black a {
color: #CCC;
}
#menu.black li a:hover, #menu.black li.active a {
color: #999;
background: #555;
border-bottom: 2px solid #444;
}
最佳答案
听起来您的 CSS 需要重新设置。请尝试以下操作。
applet, object, iframe,body,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dd, dl, dt, li, ol, ul,fieldset, form, label, legend, caption,img, header, section {
margin: 0;
padding: 0;
outline:none;
border: none;
}
关于css - 导航栏坐低，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17013083/