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

Question

长期的读者，第一时间的帖子:)有什么好主意吗？ ：

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

这些元素各自包含元素的混合。 3包含<h3>和<div> 。 1包含<q> ， <strong>和<a> 。

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

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

谢谢！

Answer 1

假设我正确理解了您的问题，则需要指定UL元素的行高：

<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/