如何實現一個看起來像一個表格並具有滾動條的列表（包含圖片）

-1

如何實現一個如下所示的列表。正如你所看到的，有3列平分，並有一個垂直滾動條。如何實現一個看起來像一個表格並具有滾動條的列表（包含圖片）

list

來源

2013-02-15 SBel

你需要上傳你已經嘗試使用，使這項工作的CSS和HTML代碼所以我們可以幫你按照你想要的方式得到它。 – 2013-02-15 12:51:38

你想要在一個div中，例如圖像上看到的內容基本上是一頁內的一個div？ – 2013-02-15 12:51:51

你有沒有考慮使用特定的框架？數據來自哪裏？如果你想要純CSS，Dan的解決方案將起作用。 – 2013-02-15 13:02:22

HTML

<ul> 
<li>credit</li> 
<li>card processing</li> 
<li>credit report</li> 
... 
<li>etc</li> 
</ul>

CSS

ul{width:600px;height:100px; overflow-y:scroll;} 
li{float:left;width:192px;border:1px solid black;} 
li:nth-chilr(n+3){border-top:0xp;} 
li:nth-child(3n+2){border-width:1px 0px 1px 0px;}

Fiddle

來源

2013-02-15 12:58:37

我個人會給ul一個固定的寬度和高度，並給它overflow-y:auto;（或scroll）。然後，我會使li全部爲display: inline-block和width:32%。我也會將結束標記從li中刪除，以便它們之間沒有不需要的空白。

jsFiddle

來源

2013-02-15 12:54:38 Gareth

如何實現一個看起來像一個表格並具有滾動條的列表（包含圖片）

回答

相關問題