Question

奇怪的是，我的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 通过将鼠标悬停在导航点上，您可以看到空间非常好。

Answer 1

更改列表中的vertical-align值：Fiddle example

#main_navigation ul {
    padding: 0px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

Answer 2

额外像素来自于display: inline-block元素是内联元素的事实，因此它将被视为文本行上的字符。

元素放置在文本行的基线上，基线下方有空格用于挂起j和g等字符。这是额外像素的来源。

据我所知，您可以毫无问题地删除display: inline-block样式。

在显示内联块列表后删除空格

2 个答案: