styling an unordered list

Question

i am trying to get an unorder list to appear like this:

enter image description here

How can this alignment be achieved? thanks for any help!

should the number of columns change with the width of your window? — Vikdor, Sep 03 '12 at 08:07
@AndyRay I think they're ordered lexicographically, so it's top to bottom first. — Chris, Sep 03 '12 at 08:15
it is supposed to be responsive design so the layout should change when it becomes smaller — Stinis87, Sep 03 '12 at 08:26
it goes left to right at the moment, if it understand the question? "barn,finans, håndverk, kultur, data, forsikring" — Stinis87, Sep 03 '12 at 08:27

score 2 · Answer 1 · edited May 23 '17 at 10:30

2

For this type of functionality you can use column-count property. Write like this:

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

For more check this I want to show list items as 2 or more columns (dynamic alignment)

Note: It does not work in IE.

For IE, you can use this JavaScript: CSS3 - Multi Column Layout Demonstration

edited May 23 '17 at 10:30

Community

1
1

answered Sep 03 '12 at 08:11

sandeep

91,313
23
137
155

score 0 · Answer 2 · answered Sep 03 '12 at 08:15

i hope this will work for you :- http://tinkerbin.com/BAzYZaPY

you can you desired result through column-widthproperty

The column-width property is only supported in Opera.

Firefox supports an alternative, the -moz-column-width property.

Safari and Chrome support an alternative, the -webkit-column-width property.

score 0 · Answer 3 · answered Sep 03 '12 at 08:16

0

or you can try

<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>
<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>
<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>

ul
{
  float:left;
}

answered Sep 03 '12 at 08:16

Prashobh

9,216
15
61
91

score 0 · Answer 4 · answered Sep 03 '12 at 08:26

You can try this style (below). Number of columns will change dynamically depending on number of elements and available width.

<style>
   ul > li
   {
      list-style-type: none;
      display: block;
      float: left;
      width: 120px;
   }
</style>
<ul>
    <li>Barn</li>
    <li>Data</li>
    <li>Design</li>
    <li>Lov og rett</li>
    <li>Matt</li>
    <li>Musikk</li>
    <li>Barn</li>
    <li>Data</li>
    <li>Design</li>
    <li>Lov og rett</li>
    <li>Matt</li>
    <li>Musikk</li>
    <li>Barn</li>
    <li>Data</li>
    <li>Design</li>
    <li>Lov og rett</li>
    <li>Matt</li>
    <li>Musikk</li>
</ul>

If you want to have fixed number of columns set width on ul element (multiply number of columns by the width of list element, e.g. in this case you want 5 columns set width to 600px):

ul {
    width: 600px;
}

styling an unordered list

4 Answers4