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

我很难让最后一个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>

---

您需要将

内联块

更改为

内联块

.top_menu_center li{
 display:block;
 float:left;
 height:100px;
 width:20%;
 margin:10px 0;
 padding:0 0;
 text-align:center;
}

---

不过，您会遇到一些间距问题，因此我在这里设置了一个jsfiddle:

出于某种原因，您的

li

宽度总和超过100%。因此，最后一个元素被从框中推出。无论如何，若你们把

li

的宽度从20%改为19%，那个么它在铬合金中就更合适了。你可以研究为什么5*20%！=在这种情况下是100%

---

Fiddle:

您应该只浮动

li

，并对其进行设置，以便

ul

清除浮动

下面是一个JSFIDLE：

---

作为旁注，如果要将它们向下推（按原始CSS中的10-15像素），可以设置

padding top

值并添加

框大小：边框框
.top_menu_center li{
    float: left;
    height:100px;
    width:20%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-align:center;
}

请参阅：
这是铬合金的btwthanks。我想接下来的问题是如何将它们放置在容器中。如果不是内联块元素，则不能指定高度和宽度，对吗？你能给我指出正确的格式吗？我应该将它们包装在div元素中吗？因为它在包含div的元素中，所以需要一个特定的高度吗？您可以将其内联并添加
position:relative
top:10px
或您需要它离顶部多远。或者您可以按照上面的建议将它们向左浮动<代码>浮动：左
显示：块可能是您的最佳选择。好的。这让我觉得我不是完全疯了。19%适合，但确实很奇怪。我认为清除边距和填充就可以了。是的，我仍然不完全信任所有浏览器上的
内联块
，所以我倾向于避免它。实际上，我同意@Brian Grahams的回答。我会使用
display:block；浮动：左方法。
.top_menu_center li{
    float: left;
    height:100px;
    width:20%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-align:center;
}