html - 如何在使用行高的导航中垂直对齐按钮？

Question

如何在使用 line-height 的导航中垂直对齐按钮，同时保持我指定的填充尺寸？

我想将此按钮与其余导航元素对齐:

我正在使用 line-height 来对齐其他按钮，但是在按钮上使用 line-height 会产生不需要的结果:

总结:我将我的导航列表项与 line-height 垂直对齐，但这会使我的按钮扩展到导航栏的整个高度。我需要使用行高将此 ul 与另一个包含站点图标的 ul 垂直对齐。使用的 line-height 高度是图标的高度。

请在此处查看重新创建的问题<知识库> fiddle .

html:

<ul>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#" class="button">Text</a>

    </li>
</ul>

CSS:

* {
    box-sizing: border-box;
}
ul {
    list-style: none;
    border: 1px solid;
    float: right;
    width: auto;
    height: auto !important;
    display: inline-block;
    margin: 0;
}
ul li {
    line-height: 103px;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    float: left;
    margin: 0;
    padding: 0;
    direction: ltr;
}
ul li a {
    line-height: 103px;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    padding: 0 15px;
    display: block;
    width: 100%;
}
.button {
    padding: 0.5em;
    background: grey;
}

Answer 1

简单的解决方法是将类应用于列(IE:<li class="button">)而不是链接:<a href="#" class="button"> (参见 edit here)

如果你不能这样做，你将不得不尝试使用高度和宽度样式，或者创建一个 div 来使你的链接适合

编辑:通过将样式更改为 padding:0 0.5em;你不会得到垂直位移