奇怪的是,我的display: inline-block
未排序列表位于height: auto
div元素内。但div比未排序列表高3px。有人看到问题吗?
html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: monospace;
}
#main_navigation {
width: 100%;
background-color: #3e3e3e;
text-align: center;
}
#main_navigation img {
height: 5em;
width: 5em;
position: absolute;
left: 1em;
top: 0.5em;
}
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
}
#main_navigation ul li {
padding: 2em;
list-style-type: none;
display: table-cell;
border-left: 1px solid #000;
}
#main_navigation ul li:hover {
background-color: #e04100;
}
#main_navigation ul li:first-child {
display: none;
}
#main_navigation ul li:nth-child(2) {
border: none;
}
#main_navigation ul li a {
font-size: 1.75em;
color: #cecece;
padding: 2em;
text-decoration: none;
}
<nav id="main_navigation"> <a href="#"><img src="res/logo.png"></a>
<ul id="main_navigation_ul">
<li>Navigation
<div id="menu_symbol" onclick="nav_toggle()">
<div></div>
<div></div>
<div></div>
</div>
<hr>
</li>
<li><a href="google.de">Home</a>
</li>
<li><a href="#">Projects</a>
</li>
<li><a href="#">About me</a>
</li>
<li><a href="#">Imprint</a>
</li>
</ul>
</nav>
JSFIDDLE 通过将鼠标悬停在导航点上,您可以看到空间非常好。
答案 0 :(得分:5)
更改列表中的vertical-align
值:Fiddle example
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
vertical-align: top;
}
答案 1 :(得分:2)
额外像素来自于display: inline-block
元素是内联元素的事实,因此它将被视为文本行上的字符。
元素放置在文本行的基线上,基线下方有空格用于挂起j
和g
等字符。这是额外像素的来源。
据我所知,您可以毫无问题地删除display: inline-block
样式。