对齐文本考虑下面的标记列表元素

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>的底部，以确保底部边界也对齐。

Here is the 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 */ 
} 

DEMO

Answer 2

使用display:table

和display:table-cell上跨度元素吨;

此外，由我最大的字体大小可以达到84px高。

LIVE DEMO