我似乎无法弄清楚如何删除图像左侧的这个空间，以及右侧图像之间的小空间。我尝试了各种方法，但没有任何效果。这是导航的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Dog's Life</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/navimg.png" class="navbarimg">
<a href="/index.html"><img src="images/banner.jpg" style="width:100%"></a>
</header>
<nav>
<ul>
<li><a href="/index.html"><img src="images/home-nav.png" alt="Home"></a></li>
<li><a href="/about.html"><img src="images/about-nav.png" alt="About"></a></li>
<li><a href="/services.html"><img src="images/services-nav.png" alt="Services"></a></li>
<li><a href="/gallery.html"><img src="images/gallery-nav.png" alt="Gallery"></a></li>
<li><a href="/contact.html"><img src="images/contact-nav.png" alt="Contact"></a></li>
</ul>
</nav>
还有 CSS:
body { background-color: #abc67e;
color: #666666;
font-family:Tahoma;
height: 100%;
}
header { background-color: #ffe4b5;
color: #FFFFFF;
font-family: Tahoma;
margin-bottom: 0;
z-index: 2;
}
h1 { line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav { font-weight: bold;
background-color: #deb887;
z-index: 1;
}
h2 { font-family: Tahoma;
}
dt { color: #000033;
font-weight: bold;
}
footer { font-size: 0.70em;
text-align: center;
font-style: italic;
padding: 10px;
}
h3 { color: #000033;
}
main { padding-left: 20px;
padding-right: 20px;
}
#wrapper { margin-left: auto;
margin-right: auto;
width: 55%;
background-color: #fdf5e6;
min-width: auto;
box-shadow: 5px 5px 5px #523411;
height: 100%;
border: 4px;
border-style: outset;
}
nav ul { list-style-type: none;
margin-top: 0;
z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right;
border-left: 1px;
border-left-style: dotted;
padding-left: 50px;}
aside img { width: 100%;
height: 100%;}
section { float: right;
width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
width: 225px;
padding-bottom: 10px;
margin: 10px;
background-color: #EAEAEA;
text-align: center;
font-style: italic;
font-family: Tahoma; }
label { float: left;
display: block;
width: 8em;
padding-right: 25px;
}
input { display: block;
margin-bottom: 1em;
}
textarea { display: block;
margin-bottom: 1em;
}
#mySubmit { margin-left: 11.5em;
}
.navbarimg { position: absolute;
padding-left: 650px;
padding-top: 110px;
z-index: -1;}
谢谢
最佳答案
<ul>元素默认有 padding-left , 所以你需要删除它:
nav ul {
padding-left: 0;
}
然后每个图像之间的空间是因为你有每个 <li>在单独的一行和 <li>有display: inline设置，因此浏览器在它们之间添加了一个空格。您可以使用 float: left 强制它不留空格:
nav li {
float: left;
}
现在 <ul> wrapper 需要知道它应该覆盖包括 float 元素在内的整个内容，以便您可以设置它 overflow: auto .
nav ul {
overflow: auto;
}
查看更新的 jsfiddle:https://jsfiddle.net/f1s11mxp/
关于html - 导航栏填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36851235/