1

Lets say i have the following list:

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

And i Needed it to display like this on the webpage:

item1 item2 item3 item4 item5 item6 item7 item8 

How would i accomplish this? is it easy enough to do with CSS or is there some magical PHP trick?

Ive received a few answers, but they all seem based much as my solution but it needs to take 870px and be ordered as such and also i am using bootstrap. so responsive no tables and such..

Any Help Greatly appreciated Thanks.

8 Answers 8

3

Woudn`t using css styling as follows be enough?

ul{ width: 870px; } li{ width: 33.33%; float: left; } 

870px used because author states that value in the question. This could be any other value as well.

Sign up to request clarification or add additional context in comments.

2 Comments

I would add .33 to width (33.33%) for greater precision. I think this is a better solution than l̕aͨŵƦȆ̴̟̟͙̞ͩ͌͝ƞCͭ̏ȇ ƇhƐȓ0nè's, since you would only need to tweak one value to increase/decrease number of columns.
Good point - ill change it. And that should be enough stackoverflow.com/a/5158996/1285871
2

Try setting the width of the unordered list

<style> ul{ width: 30em;//<<< } ul li{ float: left; width: 10em; } </style> <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> </ul> 

In action:http://jsfiddle.net/zsLUa/

1 Comment

Just change the values of the width, If you want it 870px wide, then change width: 30em; to width: 870px; and 870/3=290 so width: 10em; to width:290px;
1

If you only need to display 3 items in a row, then css :nth-child will help:

li:nth-child(3n-1) { clear: both; } 

Note: it will not work in IE8 and lower

And here is a bit of javascript/jQuery for IE8 and IE7 support:

if (document.all && !document.querySelector || document.all && document.querySelector && !document.addEventListener) { $("li").each(function (index) { if (index % 4 === 0) $(this).css('clear', 'both'); }); }; 

Comments

0

That's really a CSS thing. Read this: http://alistapart.com/article/css-floats-101.

Comments

0

Have a look at this page

http://d.alistapart.com/multicolumnlists/example1.html

Hope it helps

Comments

0

Consider using a html table with no borders.

1 Comment

Or if you want the list type follow the answer below =)
0

This CSS works for me. Tweak the widths to fit your needs.

 ul { width: 500px; } li { display:inline-block; width: 160px; } 

Link to a live demo.

Comments

0

Another solutions would go with collumns.

ul{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } 

Comments