javascript - 如何将列表显示为表格？

Question

我有一个左侧 float 的不同内容的元素列表，我需要将它们显示为一行。

<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>

我想连续显示列表项。
行高取决于行中的最大高度元素， 如何获取？

Demo

Answer 1

添加 display:table-cell 使其充当表格列。也删除 float:left。

#contentpane{}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    display:table-cell
}

DEMO

---

案例 2

如果您需要自动高度，请使用下面的 white-space:nowrap; 方法

ul#contentpane{
    width:100%;  
    white-space:nowrap;

}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    height:auto;
    display:inline-block;
    white-space:normal !important;
}

DEMO 2 || <强> DEMO (Vertically aligned to the top)