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

Question

长期阅读，第一次发帖 :) 有什么好主意吗？ :

我有 4 <li>显示为内联 block 的元素。

这些元素中的每一个都包含元素的混合。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/