Question

我有一个列表项目，我在<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

如何从上到下显示它们？

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

愿这个伪代码帮助你。

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

Answer 3

除非你必须支持IE＆lt; 10使用CSS3列：

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

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

3 个答案: