How to display
items from top to bottom not from left to right?

Question

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?

possible duplicate of [Wrapping lists into columns](http://stackoverflow.com/questions/4923/wrapping-lists-into-columns) — Felix Kling, Jun 14 '12 at 11:27
Are you using any server language like PHP ? If so, I can give you good answer ! — jaym, Jun 14 '12 at 11:32

Ravi Jain · Answer 1 · 2012-06-14T12:32:40.643

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>

May this pseudocode help you.

edited Jun 14 '12 at 12:32

answered Jun 14 '12 at 12:26

Ravi Jain

1,452
2
17
41

score 0 · Answer 2 · answered Jun 14 '12 at 12:46

0

you could do this with just HTML and some simple CSS, but you'd have to make separate lists for each set of items you wanted separted by column:

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

answered Jun 14 '12 at 12:46

ironicaldiction

1,200
4
12
27

no
is generating in a for loop on the basis of list length,so can't seperate it in different

Rizwan Khalid

Jun 14 '12 at 13:04

no, but you could tell it to make divs every "nth" iteration, and then just set the same css properties for the divs – ironicaldiction Jun 14 '12 at 13:12

score 0 · Answer 3 · answered Jun 15 '12 at 14:51

0

Unless you have to support IE < 10 use CSS3 columns:

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

answered Jun 15 '12 at 14:51

RoToRa

37,635
12
69
105

How to display items from top to bottom not from left to right?

3 Answers3

How to display
items from top to bottom not from left to right?