在字母垂直块中对 html ul/li 列表进行排序答案

【问题标题】：Sorting html ul/li list in alphabetical vertical blocks在字母垂直块中对 html ul/li 列表进行排序
【发布时间】：2011-06-03 12:55:47
【问题描述】：

这是我不时遇到的一个问题，我通常从后端的角度尝试解决，但想知道其他人是否找到了一种神奇的解决方案来解决前端的问题。

给定一个 ul/li 列表，按字母顺序在标记中提供，从 a-z：

<ul>
    <li>Alpha</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
    <li>Golf</li>
    <li>Hotel</li>
    <li>India</li>
    <li>Juliet</li>
    <li>Kilo</li>
    <li>Lima</li>
    <li>Mike</li>
    <li>November</li>
    <li>Oscar</li>
    <li>Papa</li>
    <li>Quebec</li>
    <li>Romeo</li>
    <li>Sierra</li>
    <li>Tango</li>
    <li>Uniform</li>
    <li>Victor</li>
    <li>Whiskey</li>
    <li>X-ray</li>
    <li>Yankee</li>
    <li>Zulu</li>
</ul>

通常情况下，将项目向左浮动并在视觉上以块的形式对它们进行水平排序非常容易，如下所示：

但是，要获取列，如下所示：

我总是不得不将 HTML 分解为单独的实体，例如上面示例中的四个单独的 <ul> 元素。

有没有一种方法可以将所有内容保存在一个 ul 列表中而无需任何额外的标记，只使用 CSS（无 JavaScript）来获得像上面第二张图片那样的柱状外观？我的猜测是“不”，但我以前见过一些魔法，我想更明确地回答这个问题。

【问题讨论】：

这是我能找到的最好的信息：novitskisoftware.com/test/multiplecolumnsEms.html
试试这个，不是我想的stackoverflow.com/questions/13855624/…

标签： css html-lists alphabetical

【解决方案1】：

恐怕还没有。

CSS3 有一些不错的功能，例如 http://www.quirksmode.org/css/multicolumn.html，但 Internet Explorer 不支持它，我不知道 IE9 中的支持情况如何（根据 Microsoft 目前在测试版中不存在)

【讨论】：

...抱怨，抱怨，#@!%^& IE，抱怨...：p
Multicolumn 没有说任何关于排序的事情。
@ceving 该列表已经排序，OP 希望（6 年前...）以列而不是行显示结果。

【解决方案2】：

您可以使用 CSS3 多列布局及其 polyfill：https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

【讨论】：

这应该是jQuery的插件。

【解决方案3】：

我今天需要它并写了这个 python 等价物。您可以使用原生 javascript 编写代码。

# -*- coding: utf8 -*-
import math
# --------------------- EDIT THIS PART
#define columns
c = 4
# you can define to alphabetical list here
# i used to numbers, because range func. very effective for testing
list = range(1, 26, 1)
# ---------------------- END OF EDIT
# firstly sort

list = sorted(list)

# calculate total row
r = int(math.ceil(len(list) / c)) + (1 if len(list) % c is not 0 else 0)

index = 0
table1 = []
for x in range(c):
    table1.append([])
    for y in range(r):
        if len(list) > index:
            table1[x].append(y)
            table1[x][y] = list[index]
            index += 1


res = ''
for i in range(r):
    for x in table1:
        try:
            #print x[i]
            res += "%s\t|\t" % x[i]
        except IndexError:
            res += "%s\t|\t" % "_"
            pass
    res += "\n"

#print table1
print res

https://github.com/berkantaydin/vertical-alphabetical-sorting-with-columns

【讨论】：

【解决方案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

【讨论】：