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



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

如何从上到下显示它们?

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>

愿此伪代码对您有所帮助。

你可以只用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>

除非你必须支持 IE <10 使用 CSS3 列:

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

最新更新