垂直对齐 li 元素内的混合元素

Question

长期读者，第一次发帖：）对此有什么好主意吗？ ：

我有 4 个 <li> 元素显示为内联块。

这些元素中的每一个都包含多种元素。 3 包含一个<h3> 和一个<div>。 1 包含一个<q>、一个<strong> 和一个<a>。

我的问题：我怎样才能垂直对齐这些元素的文本，而不对其中的文本数量施加任何限制，或者事先不知道其中的文本数量？随着文本长度的增加，当我希望它们保持在顶部时，较短的列会随着 <ul> 的底部而下降！

代码和结果可以在这里查看： http://jsfiddle.net/m6HG5/5/

谢谢！

Answer 1

假设我正确理解了您的问题，您需要指定 UL 元素的 line-height：

<ul>
    <li><h3>List Item 1</h3></li>
    <li><strong>List Item 2</strong></li>
    <li><a href="#">List Item 3</a></li>
</ul>

还有样式：

 ul {
        line-height:1em;
    }

li {
    float:left;
    vertical-align:middle;
    padding:5px;
    display:block;
}

h3 {
    font-size:1.5em;
}

strong {
    font-weight:bold;}

http://jsfiddle.net/m6HG5/3/