如何生成3列列表？

我不得不產生類似於可以看到在該頁面中不同羣體（主要是銀行和金融機構）項目的3列列表：如何生成3列列表？

http://funds.ft.com/FundDirectory.aspx（即使這些左右排列的div）

我有我需要添加到存儲在我的Model.Groups對象中的List<Group>中的3列的所有項目。

我想採取的方法類似：

<ul> 
    <% foreach (var item in Model.Groups) { %> 

     <li> 
      <a href='<%=item.URL %>'> 
       <%= Html.Encode(item.Name) %> 
      </a> 
     </li> 

    <% } %> 
</ul>

但這隻會產生一個列列表。有什麼方法可以讓我用簡單的HTML/CSS生成一個3列的列表，或者我必須採取更動態的方法，例如，創建3個水平對齊的列表，每個列表中的項目數量取決於Model.Groups/3中的項目總數？

還是有更聰明的方法來接近這個？我接受所有建議。由於

來源

2010-07-07 DaveDev

這是最簡單，最有效的答案，我發現：

http://www.communitymx.com/content/article.cfm?cid=27f87

引述網站：

The HTML: 
<ul> 
    <li>Antelope</li> 
    <li>Bison</li> 
    <li>Camel</li> 
    <li>Deer</li> 
    <li>Eland</li> 
    <li>Gazelle</li> 
</ul> 

The CSS: 
ul { 
    float: left; 
    width: 12em; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    float: left; 
    width: 6em; 
    margin: 0; 
    padding: 0; 
}

「如果我們想要更多的列，我們可以擴大列表並添加更多列表項「

來源

2010-07-08 10:39:32 DaveDev

這有一個缺點，它會將物品排列而不是放下，這不是大多數人閱讀列表的方式。 – Kestrel12 2016-01-26 22:20:42

這是回答了大約一個小時前在這裏：How do I overflow the contents of a column into the next column using CSS?

來源

2010-07-07 17:05:26

我不確定他們是否真的是同一個問題，雖然.. – DaveDev 2010-07-07 17:09:15

我認爲他們是那種。我認爲你應該可以使用列表中的CSS屬性。 – 2010-07-07 17:18:27

如果it's一個無序列表，你可以靜靜地飄浮在li的左側，並給他們的33％的寬度。

來源

2010-07-07 17:20:39 jeroen

CSS3 column種樣式可以在列表上使用，以及：

<ul class="group-list"> 
    ... 
</ul> 

.group-list { 
    -moz-column-gap: 20; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20; 
    column-count: 3; 
    column-gap: 20; 
}

您可以添加Modernizr這jQuery column plugin支持老版本的IE：

if (!Modernizr.csscolumns) { 
     $('.group-list').makeacolumnlists({cols: 3, colWidth: 240, equalHeight: false, startN: 1}); 
}

PPK在瀏覽器上CSS3 column support的好文章，並caniuse.com has a page on CSS3 Multiple column layout。

來源

2010-07-08 10:54:02 roryf

如何生成3列列表？

回答

相關問題