将列表包装到列中

Question

我正在使用ColdFusion填充包含<ul>列表(ColdFusions)的模板.

其中大部分时间并不长,但有些长度非常长,并且可以真正站成2-3列.

有没有<ul>,ColdFusion或者<ul>(我有jQuery`可用)方法可以轻松完成这项工作？保存一些滚动功能并不值得一些过于复杂的重量级解决方案.

Answer 1

所以我从A List Apart CSS Swag:Multi-Column Lists挖出了这篇文章.我最终使用第一个解决方案,它不是最好的,但其他人要么使用无法动态生成的复杂HTML,要么创建大量自定义类,这可以完成,但需要大量的内嵌样式和可能是一个巨大的页面

其他解决方案仍然受欢迎.

Answer 2

如果Safari和Firefox支持足够好,那么有一个CSS解决方案:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

我不确定Opera.

Answer 3

据我所知,没有纯粹的CSS/HTML方法来实现这一目标.你最好的选择是在预处理(if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1)中做到这一点.

另一个选择,使用JavaScript(我不熟悉jQuery库)将迭代列表,可能基于它们是某个类,计算子项数,如果它是一个足够高的数字,动态在第一个之后创建一个新列表,将一些列表项转移到新列表.至于实现列,你可能可以向左浮动它们,然后是一个具有样式clear: left或者样式的元素clear: both.

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}

<ul class="column">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- ... -->
  <li>Item 49</li>
  <li>Item 50</li>
</ul>
<ul class="column">
  <li>Item 51</li>
  <li>Item 52</li>
  <!-- ... -->
  <li>Item 99</li>
  <li>Item 100</li>
</ul>
<div class="clear">

Answer 4

以下 JavaScript 代码仅在 Spidermonkey 和 Rhino 中运行，并且在 E4X 节点上运行 - 即，这仅对服务器端 JavaScript 有用，但它可能为某人提供制作 jQuery 版本的起点。（它在服务器端对我来说非常有用，但我在客户端上还没有非常需要它来实际构建它。）

function columns(x,num) {
    num || (num = 2);
    x.normalize();

    var cols, i, j, col, used, left, len, islist;
    used = left = 0;
    cols = <div class={'columns cols'+num}></div>;

    if((left = x.length())==1)
        left = x.children().length();
    else
        islist = true;

    for(i=0; i<num; i++) {
        len = Math.ceil(left/(num-i));
        col = islist ? new XMLList
                     : <{x.name()}></{x.name()}>;

        if(!islist && x['@class'].toString())
            col['@class'] = x['@class'];

        for(j=used; j<len+used; j++)
            islist ? (col += x[j].copy()) 
                   : (col.appendChild(x.child(j).copy()));

        used += len;
        left -= len;
        cols.appendChild(<div class={'column'+(i==(num-1) ? 'collast' : '')}>{col}</div>);
    }
    return cols;
}

你可以像columns(listNode,2)两列一样称呼它，结果是：

<ul class="foo">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

进入：

<div class="columns cols2">
  <div class="column">
    <ul class="foo">
      <li>a</li>
      <li>b</li>
    </ul>
  </div>
  <div class="column collast">
    <ul class="foo">
      <li>c</li>
    </ul>
  </div>
</div>

它应该与 CSS 一起使用，如下所示：

<ul class="foo">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Answer 5

我用jQuery完成了这个 - 它是跨平台的,只需要最少的代码.

选择UL,克隆它,并在之前的UL之后插入它.就像是:

$("ul#listname").clone().attr("id","listname2").after()

这将在上一个列表之后插入列表的副本.如果原始列表的样式为float:left,则它们应并排显示.

然后,您可以删除左侧列表中的偶数项和右侧列表中的奇数项.

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

现在你有一个从左到右的两列列表.

要执行更多列,您需要使用.slice(begin,end)和/或:nth-child选择器.即,对于21个LI,您可以.slice(8,14)创建在原始UL之后插入的新UL,然后选择原始UL并删除所选择的li ul :gt(8).

试试关于jQuery的Bibeault/Katz书,这是一个很好的资源.

Answer 6

大多数人忘记的一件事是，当浮动<li/>项目时，所有项目都必须具有相同的高度，否则列会开始变得不正常。

由于您使用的是服务器端语言，我的建议是使用 CF 将列表拆分为 3 个数组。然后你可以使用外部包裹ul3 个内部，ul如下所示：

<cfset thelist = "1,2,3,4,5,6,7,8,9,10,11,12,13">  
<cfset container = []>  
<cfset container[1] = []>  
<cfset container[2] = []>  
<cfset container[3] = []>  

<cfloop list="#thelist#" index="i">  
    <cfif i mod 3 eq 0>  
        <cfset arrayappend(container[3], i)>  
    <cfelseif i mod 2 eq 0>  
        <cfset arrayappend(container[2], i)>  
    <cfelse>  
        <cfset arrayappend(container[1], i)>  
    </cfif>  
</cfloop>  

<style type="text/css"> 
    ul li { float: left; }  
    ul li ul li { clear: left; }  
</style>  

<cfoutput>  
<ul>  
    <cfloop from="1" to="3" index="a">  
    <li>  
        <ul>  
            <cfloop array="#container[a]#" index="i">  
            <li>#i#</li>  
            </cfloop>  
        </ul>  
    </li>  
    </cfloop>  
</ul>  
</cfoutput>

Answer 7

以下是Thumbkin示例的变体（使用 Jquery）：

var $cat_list = $('ul#catList'); // UL with all list items.
var $cat_flow = $('div#catFlow'); // Target div.
var $cat_list_clone = $cat_list.clone(); // Clone the list.
$('li:odd', $cat_list).remove(); // Remove odd list items.
$('li:even', $cat_list_clone).remove(); // Remove even list items.
$cat_flow.append($cat_list_clone); // Append the duplicate to the target div.

谢谢拇指金！