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.

Improve this question

8 Answers 8

Reset to default
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.

Improve this answer
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/

Improve this answer

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'); }); };
Improve this answer

Comments

0

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

Improve this answer

Comments

0

Have a look at this page

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

Hope it helps

Improve this answer

Comments

0

Consider using a html table with no borders.

Improve this answer

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.

Improve this answer

Comments

0

Another solutions would go with collumns.

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

Comments