Question

我正在生成<ul>按字母顺序排序的项目，这些项目跨越多行。这方面的一个例子可以在这里看到：

目前列表是横向排列的，如下所示：

a  b  c

d  e  f

g  h  i

j  k  l

但是客户端是客户端，我现在被要求更改它，以便列表垂直定向，如下所示：

a  e  i

b  f  j

c  g  k

d  h  l

不幸的是，我不知道如何以我最初做的漂亮而整洁的方式做到这一点。

如果可以使用单<ul>和CSS，有人可以请我填写吗？或者我必须制作多个列表？

Answer 1

您不必使用多个列表，只需使用一些矩阵数学。

我在这里采取了刺戳，只要最初它按字母顺序水平排序并且行和列已知，您可以使用jQuery对其进行转换。

http://jsfiddle.net/H4FPw/12/

编辑：哦是的，我在id="place"添加了<ul>属性。

Answer 2

只能通过更改CSS来实现。

好吧，如果你不关心IE，你可以：http://caniuse.com/#search=multiple%20column

你必须在某处妥协：

手动将<ul>拆分为三个<ul>。
正如@PeeHaa所暗示的那样，使用服务器端代码来更改输出<li>的顺序（但仍然将它们保留在一个<ul>内）。
使用JavaScript重新排序<li>。我使用jQuery here完成了此操作，但使用这样的插件可能更有意义：http://welcome.totheinter.net/columnizer-jquery-plugin/

Answer 3

我会使用CSS3 columns或JavaScript。如果CSS2可以使用IDK。

Answer 4

如果您在PHP中执行此操作，则可以使用简单的计数器和%。我已经设法在WordPress中获得了这样的自定义分类法列表：

<div class="row gutters">

    <?php $taxos = get_categories ( array( 'taxonomy' => 'make' ) ); ?>

    <?php $count = 0; ?>

    <div class="col col_2">

        <ul>

            <?php foreach( $taxos as $tax ) : ?>

                <li><a href="/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li>

                <?php $count++; ?>

                <?php if( $count % 5 == 0 ) echo '</div></ul><div class="col col_2"><ul>'; ?>

            <?php endforeach; ?>

        </ul>

    </div>

</div>

你也可以遍历一个数组并实现相同的功能。输出看起来像：

a    f
b    g
c    h
d    i
e    j

如何修改跨越多列的<ul>的方向？</ul>

4 个答案: