如何修改< ul>的方向跨越多列? [英] How to modify the orientation of a <ul> spanning multiple columns?

问题描述

我正在生成一个<ul>按字母顺序排序的项目，该项目跨越多行.可以在这里看到一个示例:

I am producing a <ul> of alphabetically sorted items, which spans over multiple lines. An example of this can be seen here:

http://jsfiddle.net/H4FPw/1/

当前列表水平放置，如下所示:

currently the list is laid out horizontally, as follows:

a  b  c

d  e  f

g  h  i

j  k  l

但是客户是客户，现在我被要求更改此名称，以使列表垂直定向，如下所示:

But clients being clients, I have now been asked to change this so that the list is vertically oriented, as follows:

a  e  i

b  f  j

c  g  k

d  h  l

不幸的是，我不知道该如何以我最初做的那种漂亮而整洁的方式来做.

Unfortunately I don't know how to do this in the nice and tidy way that I've originally done it.

如果可以用单个<ul>和CSS进行此操作，请有人帮我填写吗?还是我必须列出多个列表?

Can somebody please fill me in if this is possible to do with single <ul> and CSS? Or do I have to make multiple lists?

推荐答案

仅通过更改CSS不能做到这一点.

You can't do it by only changing CSS.

好吧，如果您不关心IE，可以这样做: http://caniuse.com /#search = multiple％20column

Well, you can if you don't care about IE: http://caniuse.com/#search=multiple%20column

您必须在某处妥协:

• 手动将<ul>拆分为三个<ul>.
• @PeeHaa暗示，请使用服务器端代码更改输出<li>的顺序(但仍将其保留在一个<ul>中).
• 使用JavaScript重新排列<li>的顺序.我使用完成此操作jQuery ，但使用这样的插件可能更有意义: http://welcome.totheinter.net/columnizer-jquery-plugin/

• Split the <ul> into three <ul>s manually.
• As hinted at by @PeeHaa, use server-side code to change the order that the <li>s are output (but still keep them inside one <ul>).
• Use JavaScript to reorder the <li>s. I did this using jQuery here, but it would probably make more sense to use a plugin like this: http://welcome.totheinter.net/columnizer-jquery-plugin/

这篇关于如何修改< ul>的方向跨越多列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！