Question

我有一个项目清单，左边有不同的内容，我需要将它们显示为一行。

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

Answer 2

你应该使用javascript设置清除：两者都是行溢出元素。

 var ch=$("#container").width();

    var itemsPerRow=Math.floor(ch/102);

    var itemsCount=$("#contentpane li").length;
    var loopRound=Math.floor(itemsCount/itemsPerRow);

    for(var i=1;i<loopRound+1;i++)
    {
        var nextFirstItem=i*itemsPerRow+1;

        $("#contentpane li:nth-child("+ nextFirstItem  +")").css({"clear":"both"});
    }

demo

Answer 3

ul {
    display: table-row;
}

ul  > li {
    display: table-cell;
}

请注意，您应该有一个包含display: table的包装器，以便构建完整的表格表示。

Answer 4

试试这个

var maxHeight = 0;
 $("#contentpane li").each(function( index ) {
     var height = $(this).height();
     if(height  > maxHeight){
         maxHeight =height;
      }
 });

$("#contentpane li").css("height",maxHeight);

Fiddle Demo

Answer 5

将高度设置为li。

#contentpane{

}
#contentpane li{
    float:left;
    padding:10px;
    width:80px;
    height:180px;
    overflow:auto;
    display:table-cell;
    border:1px solid #000;
}

<强> FIDDLE

Answer 6

删除浮动并改为使用内联块：

http://jsfiddle.net/CmkSb/10/

#contentpane li{
    padding:10px;
    width:80px;
    display:inline-block;
    vertical-align: text-top;
    border:1px solid #000;
}

如何将列表显示为表格？

6 个答案: