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/

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

1 个答案: