li标签的垂直和水平编号

Question

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:

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

Answer 1

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

Answer 2

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+

Answer 3

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>