html - ul 的最后一个 li 组件在其余部分下方对齐

Question

我无法让最终的 LI 元素在我的导航容器中对齐。我有其他四个间隔很好，并且有足够的空间让第五个元素显示在容器中，但它以某种方式被推低了。我很困惑为什么会这样。下面的 HTML 和 CSS。非常感谢任何帮助!

<div class='top_menu_wrapper'>
    <div class='top_menu_center'>
        <ul>
            <li class='menu_link menu'>Who We Are</li>
            <li class='menu_link menu'>Family House</li>
            <li class='menu_link ypac_logo menu'> IMAGE PLACEHOLDER</li>
            <li class='menu_link menu'>Upcoming Events</li>
            <li class='menu_link menu'>Get Involved</li>
        </ul>
    </div>
</div>

CSS:

.top_menu_wrapper{
  min-height: 65px;
  border: 1px solid black;
  position: fixed;
  width:100%
  }
.top_menu_center{
 width:65%;
 border: 1px solid black;
 margin: 0 auto;
 height:100px;
 }
.top_menu_center ul{
 list-style-type:none;
 width:100%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 height:100px;
}
.top_menu_center li{
 display:inline-block;
 height:100px;
 width:20%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 text-align:center;
}

Answer 1

由于某种原因，您的li 宽度之和超过了100%。因此，最后一个元素被推出盒子。无论如何，如果您将 li 的宽度从 20% 更改为 19%，它就会开始更适合 Chrome。在这种情况下，您可以研究为什么 5 * 20% != 100%。

fiddle :http://jsfiddle.net/WP6Lb/