多列HTML列表中的第一列中的项目数量是多少？

我在这里看看http://novitskisoftware.com/test/multiplecolumnsEms.html和各种其他网站制作多列列表，它工作正常。多列HTML列表中的第一列中的项目数量是多少？

我想知道的是，如果我们说我有一个动态列表，并且如果有例如10个列表项目，我想在第一列中保留其中的8个，其余的在第二列中，即始终8列中的第一列如果有超过8个。

我认为这是不可能的只有CSS/HTML所以是我可以用JavaScript/jQuery做什么？我更喜欢将插件保持在最低限度。

在此先感谢。

来源

2011-10-16 user997685

听起来像的东西，你可以很容易地在服务器端做的。 – Venemo

我不控制如何生成HTML（SharePoint导航）。 – user997685

你是用任何逻辑构建列表项，我的意思是它是任何算法的一部分。 – punit

假设生成的页面的HTML包含：

<ul> 
    <li class="item1">A</li> 
    <li class="item2">B</li> 
    <li class="item3">C</li> 
    <li class="item4">D</li> 
    <li class="item5">E</li> 
    <li class="item6">F</li> 
    <li class="item7">G</li> 
    <li class="item8">H</li> 
    <li class="item9">I</li> 
    <li class="item10">J</li> 
    <li class="item11">K</li> 
    <li class="item12">L</li> 
    <li class="item13">M</li> 
    <li class="item14">N</li> 
    <li class="item15">O</li> 
</ul>

现在，您可以使用JavaScript来生成所需的CSS如下：

/* 
    unorderedList: the HTML ul element 
    columnSize: the number of items per column 
    columnGap:  the distance between 2 columns in ems 
    offset:  the offset of the first column in ems 
*/ 

function generateMultiColumnLayout(unorderedList, columnSize, columnGap, offset) { 
    var items = unorderedList.getElementsByTagName("li"); 

    for (var i = 0, l = items.length; l--; i++) { 
     var itemStyle = items[i].style; 
     itemStyle.lineHeight = "1.2em"; 

     if (!i && i % columnSize) {     // old column 
      itemStyle.marginLeft = offset + "em"; 
     } else {          // start of new column 
      offset += columnGap; 
      itemStyle.marginLeft = offset + "em"; 
      itemStyle.marginTop = -columnSize + "em"; 
     } 
    } 
} 

window.onload = function() { 
    var items = document.getElementsByClassName("item1"); 

    for (var i = 0, l = items.length; l--; i++) { 
     generateMultiColumnLayout(items[i].parent, 8, 10, 5); 
    } 
};

来源

2011-10-16 12:57:54

-1

为什么你不使用这个表？如果您愿意，甚至可以使用DOM操作方法使用JavaScript创建表格。

来源

2011-10-16 12:57:37 hugomg

作为另一个html/js noob，它会很高兴知道为什么这是一个投票的答案。将东西插入表格似乎是解决此问题的合理方法。 – worldsayshi

@worldsayshi：如果你真的不想改变文档结构，你基本上被迫在接受的答案中使用该方法。如果您可以修改文档结构，那么您可以使用表格，或者您可以为这两个部分分别使用单独的div，将子项目放在这些部分中。 – hugomg

多列HTML列表中的第一列中的项目数量是多少？

回答

相关问题