html - 内联 block 元素和定位/对齐

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>

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

我的困惑来自这样一个事实，即垂直对齐方式似乎只有在我使用开发人员控制台更改链接内的文本长度时才会发生变化。

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

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

Answer 1

这就是 vertical-align 的作用:)

vertical-align: top;

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