Html 将不同大小的文本与列表元素底部对齐

给定以下标记：

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

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

我想将每个

元素与其父元素的底部对齐，确保底部边框也对齐

这一切都不起作用

需要支持IE8>向上

---

注意：项目必须浮动

从li中删除

浮动：左

，并添加

显示：内联；垂直对齐：底部对齐

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

在li元素上使用
显示：表格

和
显示：span元素上的表格单元格

而且，我认为最大的字体大小是84px高

项目必须浮动。如果您看到降级，项目现在将向左对齐。问题是列表项目包含块元素，因此无法使用
显示：内联
。我已经更新了原来的提琴，使它更清晰。@Sowmya:我认为它们与底部边框不对齐。查看最后一个li项，它将跳转到top@BenFoster在寻找一些不同的解决方案时，我们需要用可能的替代方案修复内部的小故障。在这里，我们不知道使用块元素的确切要求是什么。所以你要么用这个方法解决这个问题，要么尝试新的方法。文本不是内联的。2.IE8是否支持
表格单元格
？“从Internet Explorer 8开始，表格显示样式允许元素与表格的视觉布局紧密平行。”
li {
 border-bottom: 1px solid red;      
 display:inline;  vertical-align:bottom;  
 margin-left: 10px;
 height: 70px; /* height of largest element */
}