How can I style ul li in css?

Question

Possible Duplicate:
I want to show list items as 2 or more columns (dynamic alignment)

Sorry for my English!

I have a problem with ul li:

my 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>
    <li>10</li>
</ul>

my css:

ul {
width:60px;

}

ul li{
float:left;
width:20px;
list-style:none;
}

my list is divided into 3 columns like:

So, my question is: how can I sort my list like :

1 4 7 10
2 5 8
3 6 9

Thanks for any help:D

I don't think there's css only solution for this.. :s, unless maybe you change your markup a bit? — Andreas Wong, Apr 05 '12 at 03:43

score 3 · Answer 1 · edited May 23 '17 at 11:59

3

You can use css3 column-count property for this check this for more

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

edited May 23 '17 at 11:59

Community

1
1

answered Apr 05 '12 at 03:46

sandeep

91,313
23
137
155

thanks for your answer, css 3 is good , but it may can't not run on IE:D – JaclBlack Apr 05 '12 at 04:33
there is a javascript for column count property for IE http://www.csscripting.com/css-multi-column/ – sandeep Apr 05 '12 at 04:36

score 1 · Answer 2 · answered Apr 05 '12 at 04:05

1

See fiddle for code and demo

Fiddle: http://jsfiddle.net/pGHCd/

Demo: http://jsfiddle.net/pGHCd/embedded/result/

ss:

enter image description here

answered Apr 05 '12 at 04:05

w3uiguru

5,864
2
21
25

rlemon · Answer 3 · 2012-04-05T04:07:30.430

0

CSS3 to the rescue!

ul {
    width:60px; height: 60px;
}

ul li{
    float:left;
    width:20px;
    list-style:none;
}
ul, ul li {
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
}

http://jsfiddle.net/rlemon/Y5ZvA/2/

edited Apr 05 '12 at 04:07

answered Apr 05 '12 at 03:53

rlemon

17,518
14
92
123

score 0 · Answer 4 · answered Apr 05 '12 at 04:10

Hi you can do this on css3 properties as like this

Css

ul{
    -moz-column-count: 3;
    -moz-column-gap: 33%;
    -webkit-column-count: 3;
    -webkit-column-gap: 33%;
    column-count: 4;
    column-gap: 33%;
    background:green;
    width:100px;

}
li{
    height:20px;
    list-style:none;
}

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>
    <li>10</li>
</ul>

Live demo http://jsfiddle.net/rohitazad/pMbtk/376/

But is not work IE

How can I style ul li in css?

4 Answers4

Linked