开发者

(x)html/css: list items distributed in columns

开发者 https://www.devze.com 2022-12-08 02:41 出处:网络
Is there a way, with the help o开发者_运维技巧f CSS, to let a single list (ul or ol) behave like this:

Is there a way, with the help o开发者_运维技巧f CSS, to let a single list (ul or ol) behave like this:

1.    4.    7.
2.    5.    8.
3.    6.    9.

In other words, have their subsquent elements be distributed in columns?


If you don't mind using CSS3, you could always try using CSS3 multi-columns, also via A List Apart


A List Apart has a good article on multi-column lists.

There are no "pretty" ways to do this with CSS I'm afraid.


I would echo what James Goodwin says, but include browser vendors experimental CSS support in your CSS:

ol {
    column-count:3;
    column-width:33%;
    -moz-column-count:3;
    -moz-column-width:33%;
    -webkit-column-count:3;
    -webkit-column-width:33%;        
    /* etc., etc. */
}


You can't do this by CSS but only by using HTML. Of course you could use a script language to create columns automatically, but CSS doesn't support this.

0

精彩评论

暂无评论...
验证码 换一张
取 消