Question

我的网站上只有一个简单的导航栏，只使用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;
}

Answer 1

听起来你的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;
}

Answer 2

导航中的无序列表在顶部和底部有50px的边距。这就是将徽标div与导航分开的原因。

#menu {
...
margin: 50px 0;
...
}

如果你想要50px以下，你想写它：

margin: 0 0 50px 0;

或只是：

margin-bottom: 50px;

您不需要重置CSS。这就像用大炮做手术刀一样。

Answer 3

我根据你创建的html和css here创建了一个jsFiddle。

我最后通过写下来杀死你#banner div的额外像素：

#menu { margin: 0; }
#banner { line-height: 0; }

编辑：正如本杰明所述，如果你想保持最低保证金，你可以写下：

#menu { margin: 0 0 50px 0 }.
// The order of specification is top, right, bottom, left

Navbar坐到低处

3 个答案: