html - 将不同大小的文本对齐到列表元素的底部

Question

给定以下标记：

<ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
    <li><span>Four</span></li>
    <li><span>Five</span></li>
</ul>

以及以下 CSS：

body {
 font-family: Arial, sans-serif;
 font-size: 14px;
}

ul {
 list-style-type: none;
 padding: 0;
 margin: 0;   
}

li {
 border-bottom: 1px solid red;      
 float: left;
 margin-left: 10px;
 height: 70px; /* height of largest element */
}

span {
 font-weight: bold;
 display: block; /* important, needs to be block */
}

li:nth-child(2) {
 font-size: 2em;   
}

li:nth-child(3) {
 font-size: 3em;   
}

li:nth-child(4) {
 font-size: 4em;   
}

li:nth-child(5) {
 font-size: 5em;   
}

每个列表项包含不同大小的文本。

我想将每个<span>元素与其父元素的底部对齐，以<li>确保底部边框也对齐。

这是这个不起作用的jsfiddle。

需要支持IE8>以上。

注意：项目必须浮动

Answer 1

float:left从 li 中删除并 添加display:inline; vertical-align:bottom;

li {
 border-bottom: 1px solid red;      
 display:inline;  vertical-align:bottom;  
 margin-left: 10px;
 height: 70px; /* height of largest element */
}

演示

Answer 2

display:table在 li 元素上使用

display:table-cell在 span 元素上；

另外，对我来说，最大的字体大小是 84px 高。

现场演示