如何顯示列表爲表格？

我有一個項目列表與不同的內容左浮動，我需要顯示他們作爲一行。如何顯示列表爲表格？

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

我想在一行中顯示列表項。
行高取決於行中的最大高度項目，如何獲取它？

Demo

來源

2013-04-03 user1834809

我覺得這不是一個好主意。我會用div來做。 – Jai

@Jai'

'也是一個很好的元素。 – VisioN

@VisionN yup同意了。 – Jai

回答

，你應該用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

來源

2013-04-03 11:01:30

添加display:table-cell，所以它作爲表列。刪除float:left以及。

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

DEMO

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

來源

2013-04-03 10:19:04 Sowmya

http://jsfiddle.net/CmkSb/3/ float：left;需要。 – user1834809

_Why_是「float：left required」...？ – CBroe

它不是我的解決方案 – user1834809

ul { 
    display: table-row; 
} 

ul > li { 
    display: table-cell; 
}

請注意，您應該爲了有一個包裝與display: table內置了完整的表格表示。

來源

2013-04-03 10:20:30 Zeta

試試這個

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

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

Fiddle Demo

來源

2013-04-03 10:22:27 karthick

我無法測量身高 – user1834809

你沒有:::> – user1834809

結帳接受的答案。 – user1834809

設置高度李。

#contentpane{ 

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

FIDDLE

來源

2013-04-03 10:24:19

你讀過我的問題了嗎？我無法測量身高。 – user1834809

在表格元素上，高度僅指示最小高度。 – cimmanon

刪除浮動和使用inline-block的替代：

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

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

來源

2013-04-03 12:03:02 cimmanon

相關問題