将html列表拆分为另一列

我有一个html列表，它对于我的容器来说太长了，我想把它拆开，在另一列中显示额外的项目。但是，当我在css中使用列时，它会将列表平均分割。比如，如果我有12个项目，那么每列6-6个。但我不想这么做。相反，我希望它只显示其他列中的额外项

在下图中，我想在另一列中显示从9到12的项目

请帮忙

Css

HTML

请参考这张图片

---

如图所示，9到12个列表项是现成的。我无法将其放入框中。

您可以使用

ul的
列
属性
查看此项了解更多信息。
您可以使用
ul的
列
属性

查看此项了解更多信息。
您使用的columns属性错误

你有：

.subMenu{
...
 columns: 250px;
...
}

此属性不是查找列的大小，而是查看应生成多少列（以及其他属性：）

因此，当您将此属性更改为“2”（或任意多个所需列）时，我相信我们会得到您想要的结果：


旁注：在你的问题中，你说你希望第一列有9行，第二列有其余的行。我找不到一个“列”特定的方法来做这件事，所以作为黑客，我调整了容器的高度。请看小提琴中的CSS

最后，在@AhmetEmre90提供的链接中，有一个IE黑客攻击，因为旧版本的IE不会设置此属性的样式。我正在为子孙后代提供链接和IE黑客

代码：加布里埃尔：

HTML

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

您错误地使用了columns属性

你有：

.subMenu{
...
 columns: 250px;
...
}

此属性不是查找列的大小，而是查看应生成多少列（以及其他属性：）

因此，当您将此属性更改为“2”（或任意多个所需列）时，我相信我们会得到您想要的结果：


旁注：在你的问题中，你说你希望第一列有9行，第二列有其余的行。我找不到一个“列”特定的方法来做这件事，所以作为黑客，我调整了容器的高度。请看小提琴中的CSS

最后，在@AhmetEmre90提供的链接中，有一个IE黑客攻击，因为旧版本的IE不会设置此属性的样式。我正在为子孙后代提供链接和IE黑客

代码：加布里埃尔：

HTML

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

根据提供的信息，容器似乎不够宽，无法容纳立柱，包括间隙，需要计算高度，以确保立柱在正确的点断裂

然后需要使用
列填充：auto使列不平衡



。子菜单{
边框：1px#00f实心；
左边距：20px；
列表样式：十进制内；
宽度：500px；
高度：260px；
-webkit列：180px；
-moz柱：180px；
色谱柱：180px；
-webkit柱间隙：20px；
-moz柱间距：20px；
柱间距：20px；
-webkit列填充：自动；
-moz列填充：自动；
列填充：自动；
}
.子菜单li{
边框：1px#f00实心；
填充：5px0px；
文本转换：无；
字体大小：16px；
颜色：#7575；
-webkit列内部中断：避免；
内部分页符：避免；
破门而入：避免；
}

























根据提供的信息，容器似乎不够宽，无法容纳立柱，包括间隙，需要计算高度，以确保立柱在正确的位置断裂

然后需要使用
列填充：auto使列不平衡



。子菜单{
边框：1px#00f实心；
左边距：20px；
列表样式：十进制内；
宽度：500px；
高度：260px；
-webkit列：180px；
-moz柱：180px；
色谱柱：180px；
-webkit柱间隙：20px；
-moz柱间距：20px；
柱间距：20px；
-webkit列填充：自动；
-moz列填充：自动；
列填充：自动；
}
.子菜单li{
边框：1px#f00实心；
填充：5px0px；
文本转换：无；
字体大小：16px；
颜色：#7575；
-webkit列内部中断：避免；
内部分页符：避免；
破门而入：避免；
}

























请共享代码中的相关摘录，突出显示您迄今为止尝试过的内容。您的HTML无效
ul
只能将
li
作为直接子项。确定。。这与我的问题无关。删除它不会解决我的查询。请共享代码中的相关摘录，突出显示您迄今为止尝试的内容。您的HTML无效
ul
只能将
li
作为直接子项。确定。。这与我的问题无关。删除它并不能解决我的问题。虽然这可以从理论上回答这个问题，但请在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生变化，则只有链接的答案可能无效，而这可能从理论上回答问题，包括此处答案的基本部分，并提供链接供参考。只有链接的答案可能会变得无效，如果链接页面
(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}