CODEWITHSUNDEEP
htmlcss
Stinis87
Stinis87

Reputation: 140

styling an unordered list

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!

Upvotes: 2

Views: 133

Answers (4)

sandeep
sandeep

Reputation: 92803

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

Upvotes: 2

Sebastian.Belczyk
Sebastian.Belczyk

Reputation: 885

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

Upvotes: 0

Prashobh
Prashobh

Reputation: 9542

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

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

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.

Upvotes: 0

Related Questions