0

I have a list items which I am mapping on <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>

It display the items on the page like from left to right:

Item1 Item2 Item3 Item4 Item5
Item6 Item7 Item8 Item9 Item10
Item11

I want to display them from top to bottom like

Item1 Item4 Item7 Item10
Item2 Item5 Item8 Item11
Item3 Item6 Item9

How can I display them from top to bottom?

4

3 回答 3

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

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

于 2012-06-14T12:26:20.113 回答
0

你可以只用 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>
于 2012-06-14T12:46:44.890 回答
0

除非您必须支持 IE < 10，否则请使用 CSS3 列：

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

于 2012-06-15T14:51:24.400 回答