Question

我正在尝试使用javascript而不是CSS3将<li>的长列表拆分为3列（因为它并非在所有浏览器中都支持，即IE）。但它不起作用。基本上，我想每5或7或3，无论数字<li>是什么，并将它们作为列等等。因此，如果我在列表中有A B C D E F G H I J K L，则第一列应包含ABCDEF，下一列将从GHIJKL开始。我希望你明白我的意思。

使用Javascript：

var colCount = 3,
        ul = $('ul'),
        li = ul.find('li'),
        liLen = li.length,
        liPerCol = Math.ceil(liLen / colCount),
        ulWrap = '<ul style="float:left;width:200px;margin-right:20px;" />',
        liSub,
        i;

for(i = 0; i < liLen; i++){
    liSub = liLen.slice(i, 4);
    liSub.wrap($(ulWrap));
}

HTML：

<ul>
  <li><a href="#">COLUMN 1</a></li>
  <li><a href="#">col 1.1</a></li>
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</a></li>
  <li><a href="#">Asdijnd oasd</a></li>
  <li><a href="#">Awrom</a></li>
  <li><a href="#">Aoidn iojd</a></li>
  <li><a href="#">Apyrie sdij</a></li>
  <li><a href="#">Asddewdwe</a></li>    
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</a></li>
  <li><a href="#">Asdijnd oasd</a></li>
  <li><a href="#">Awrom</a></li>
  <li><a href="#">Aoidn iojd</a></li>
  <li><a href="#">Apyrie sdij</a></li>
  <li><a href="#">Last entry col 1</a></li>
</ul>

我需要你的协助。

非常感谢。

Answer 1

这就是你要找的东西：

http://jsfiddle.net/97sJ6/1/

这将li分成三列。

var li = $('li'),
    len = li.length,
    col_len = 3,
    num_cols = Math.floor(len/col_len),
    j = 0;

li.each(function(i) {
    if (i % num_cols == 0 && j < col_len) {
        j++;
        $('body').append('<ul style="float:left;width:200px;margin-right:20px;" id="divider' + j + '"/>');          
    }
   if (j == col_len+1) j--;
   $(this).appendTo('#divider' + j);

});

Answer 2

你可以在css 2.1中尝试，给float：left并为所有li指定一些宽度。我希望

像这样：http://jsfiddle.net/thilakar/RXQgn/1/

将列表列入不在javascript中的列

2 个答案: