CODEWITHSUNDEEP
css
user4460730
user4460730

Reputation:

Multiline UL List

I have a list with 6 items, I want the list the be multicolumn so, on the first column it will show the first 3 items and on the second column the following 3 items and so on... But I really can't understand how to create this behavior using an UL.. I tried playing with the options for example setting the UL {height:50%;} but with no results

This is a basic fiddle http://jsfiddle.net/n8f7hxzo/

I know I can use a table but I don't want to, Just wanted to know if there's a simple solution about this problem

Upvotes: 0

Views: 1618

Answers (3)

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

CSS: 

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

Upvotes: 1

EdenSource
EdenSource

Reputation: 3387

You have to use display:inline-block in order to display your items horizontally.

Adding a width to your LI's (by exemple 33%), it will work.

FIDDLE

Upvotes: 0

RWAM
RWAM

Reputation: 7018

Use css columns like http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/ should solve your problem

Upvotes: 0

Related Questions