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

Question

奇怪的是,我的未排序列表display: inline-block位于height: autodiv元素内.但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列表中的值:小提琴示例

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