我正在尝试将水平导航栏直接放置在横幅问题下方，并链接到同一页面上的本地位置。
- 在我的一生中，我无法摆脱横幅图像和导航栏之间的空白。在我将横幅从纯 HTML 更改为图像之前，这个空间并不存在，但我不知道与图像有关的任何事情都无法修复此问题。
- 指向简介和问题的链接会导致这些标题位于 View 顶部，但指向简介的链接不会。
这是JSFiddle
这是工作代码:
h1 {
color: black;
text-align: center;
}
html, body {
padding:0;
margin:0;
border: 0;
}
#statement {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
width: 810px;
}
#navbar {
float: left;
padding: 0;
}
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
display: table;
}
#navbar li {
float: left;
text-align: center;
}
#navbar li a {
font-size: 30px;
display: table-cell;
width: 270px;
height: 50px;
text-decoration: none;
color: black;
vertical-align: middle;
background-color: #f0e68c;
}
#navbar li a:hover {
color: #f0e68c;
background-color: black;
}
<body>
<div id="statement">
<img src="http://dreamatico.com/data_images/ocean/ocean-5.jpg" width="810px" height="300px">
<div id="navbar">
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#bio">Bio</a></li>
<li><a href="#issues">Issues</a></li>
</ul>
</div>
<h1 id="intro">Intro</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
<h1 id="bio">Bio</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
<h1 id="issues">Issues</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</body>
最佳答案
For the life of me, I cannot get rid of the white space between the banner image and the navigation bar. This space did not exist before I changed the banner from pure HTML to an image, but nothing I know to do with images fixes this.
要删除空白，请使用vertical-align: Bottom
#statement > img {
vertical-align: bottom;
}
The links to Bio and Issues cause those headlines to be positioned at the top of the view but the link to Intro does not.
您需要清除 h1 上方的 float 元素
h1 {
clear: both;
display: block;
}
关于html - 导航栏 : Unwanted space; imprecise jump to local link，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32231239/