如何从上到下而不是从左到右显示 <li> 项目？

【问题标题】：How to display <li> items from top to bottom not from left to right?如何从上到下而不是从左到右显示 <li> 项目？
【发布时间】：2012-06-17 10:11:23
【问题描述】：

我有一个列表项，我将其映射到 <ul> <li>。

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
<li>Item9</li>
<li>Item10</li>
<li>Item11</li>
</ul>

它在页面上从左到右显示项目：

Item1 Item2 Item3 Item4 Item5
Item6 Item7 Item8 Item9 Item10
Item11

我想像这样从上到下显示它们

Item1 Item4 Item7 Item10
Item2 Item5 Item8 Item11
Item3 Item6 Item9

如何从上到下显示它们？

【问题讨论】：

Wrapping lists into columns 的可能重复项
标签是硬编码还是动态生成？

您是否使用任何服务器语言，例如 PHP ？如果是这样，我可以给你很好的答案！

我正在使用 c# 并且后端在 mvc 视图中。

正在生成硬编码，例如 foreach(var item in list) {

item.Name

}

标签： html html-lists

【解决方案1】：

int count = 0;
<ul style="display:inline" >
    if(count < items.length)
    {
        print("<li>");
        print("<ul>");
        for(int a = 1 ; count < items.length && a <= 3 , count++ , a++)
        {
               print("<li>" + items[count].Name + "</li>");
        }
        print("</ul>");
        print("</li>");
    }
</ul>

希望这个伪代码对您有所帮助。

【讨论】：

【解决方案2】：

你可以只用 HTML 和一些简单的 CSS 来做到这一点，但是你必须为每组你想用列分隔的项目创建单独的列表：

<style>
ul {
    margin-top:0px;
    margin-left:0px;
    float:left;
}

</style>

<html>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
<ul>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>
</html>

【讨论】：

no
是根据列表长度在for循环中生成的，所以不能在不同的

不，但你可以告诉它每“nth”迭代创建一个 div，然后为 div 设置相同的 css 属性

【解决方案3】：

除非你必须支持 IE

https://developer.mozilla.org/en/CSS3_Columns

【讨论】：