内嵌块元素和定位/对齐

Question

这是下面代码的错位输出。

.recipes-mobile-menu {
    display:block;
    width:350px;
    margin: 0 0 0 12px;
}

.recipes-mobile-menu a:link, .recipes-mobile-menu a:visited, .recipes-mobile-menu a:active {
    display:inline-block;
    background: #002b76;
    width:19%;
    height:80px;
    text-align:center;
    color:#fff;
    font-size:0.85em;
    padding:10px 4px;
    margin:0;
    white-space:normal;
    text-transform:capitalize;
}

.recipes-mobile-menu a:hover, .recipes-mobile-menu a.on {
    background:#da2b28; 
}



<div class="recipes-mobile-menu">
    <a href="/recipes/extra-kick-eats">Extra<br>kick<br>Eats</a>
    <a href="/recipes/louisiana-recipes">Louisiana<br>Recipes</a>
    <a href="/recipes/family-favorites">Family<br>Favorites</a>
    <a href="/recipes/asian-recipes" class="on">Asian<br>recipes</a>
    <a href="/recipes/winning-wing-recipes">Winning<br>Wing<br>Recipes</a>
</div>

这个小提琴也显示了错位。 http://jsfiddle.net/muzfuq7t/

我的困惑来自这样一个事实：只有当我使用开发者控制台更改链接内的文本长度时，垂直对齐似乎才会改变。

更改宽度，高度，填充和边距不会更正垂直对齐。

那里发生了什么，我该如何纠正？

Answer 1

这是vertical-align的用途：）

vertical-align: top;

将此添加到您的inline-block元素中！

Answer 2

您可以使用 vertical-align:top; 来垂直对齐内联块元素。

或者您也可以使用 float:left; 并添加 margin:2px; 。

DEMO http://jsfiddle.net/muzfuq7t/4/