CODEWITHSUNDEEP
jqueryhtmlcsshtml-lists
Peter
Peter

Reputation: 297

vertical and horizontal numbering of li tags

Im sorry I wasn't sure what to call the title.

Im using joomla and have a menu creating an ul tag and many li's. within each of the li tags are there a link to a page. i have chosen to give my li tags numbers.

right now the order is like this:

enter image description here

How is it possible using CSS/html or any other solution?

Upvotes: 0

Views: 131

Answers (3)

Aroniaina
Aroniaina

Reputation: 1252

Set CSS columns property on ul

li{list-style-type: decimal-leading-zero;}
ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;
  /* or this for short code
  -webkit-columns: 150px 3;
  -moz-columns: 150px 3;
  columns: 150px 3;
  */
}
<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>
  <li>item9</li>
</ul>

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Use coloumns css rule

HTML 

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

css:

ul {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}

note: works with ie12+

Upvotes: 1

Ricky S
Ricky S

Reputation: 371

If you're not too concerned about backwards browser compatability you can use CSS columns:

ul {
    column-count: 3;
    column-gap: 5px;
}

ul li {
    display:block;
}

This should give you roughly what you want, however it won't work in IE9 or older. You should have full support in Chrome, Firefox and Safari by now though.

Reference here: http://www.w3schools.com/css/css3_multiple_columns.asp

Upvotes: 2

Related Questions