如何产生3列列表？ [英] How to produce a 3-column list?

问题描述

我必须生成一个3列的项目，类似于此页面上不同组别（主要是银行和金融机构）可以看到的项目：

I have to produce a 3-column list of items similar to what can be seen for the different groups (mostly banks and financial institutions) at this page:

http://funds.ft.com/FundDirectory.aspx （即使这些是水平对齐的divs）

http://funds.ft.com/FundDirectory.aspx (even though these are horizontally aligned divs)

我需要添加到 List< Group> 中的3列在我的 Model.Groups 对象。

I have all the items I need to add to the 3 columns in a List<Group> stored in my Model.Groups object.

我在想一个类似的方法：

I was thinking of taking an approach similar to:

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

but this will only generate a single-column list. Is there any way for me to produce a 3-column list with simple HTML/CSS or do I have to take a more dynamic approach, by e.g. creating 3 horizontally aligned lists, with the number of items per list depending on the total number of items in Model.Groups / 3?

或者我有一个更聪明的方式来接近这个？我向所有建议开放。感谢

Or is there a smarter way for me to approach this? I'm open to all suggestions. Thanks

推荐答案

这是我发现的最简单和最有效的答案：

This is the simplest and most effective answer I've found:

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;
} 

如果我们想要更多列，列表和添加更多列表项

"If we want more columns we can widen the list and and add more list items"

这篇关于如何产生3列列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！