html - 将 html 列表拆分为另一列

Question

我有一个 html 列表，对于我的容器来说太长了，我想打破它并在另一列中显示额外的项目。但是当我在 css 中使用列时，它会平均划分列表。就像如果我有 12 个项目，那么每列中有 6-6 个。但我不想这样做。相反，我希望它只显示另一列中的额外项目。

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

请帮忙。

CSS

.subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 500px;
  height: 350px;
  -webkit-columns: 250px;
  -moz-columns: 250px;
  columns: 250px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

HTML

<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>

请参考此图片

正如您在图像中看到的那样，9 到 12 个列表项是开箱即用的。我不能把它带进盒子里。

Answer 1

您使用的列属性错误。

你有过：

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

此属性不是在寻找列的大小，而是在查看应该生成多少列（以及其他属性：w3 CSS3 Columns Property）

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

小提琴

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

最后，在@AhmetEmre90 提供的链接中，有一个 IE hack - 因为旧版本的 IE 不会设置此属性的样式。我为后代包括链接和 IE hack。

代码作者：@Gabriel：SO-如何在两列中显示无序列表？

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>

JAVASCRIPT

(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);

CSS

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

Answer 2

要实现两列中项目的非一半/一半分布，您可以height为ul. 实际上，您已经这样做了（在 的 css 规则中.subMenu），因此只需调整该heightCSS 规则中的值，使其适合需要的 8 个列表项：

（请注意，我更改了width以更好地将其放入此处的片段窗口中，这对于实际情况当然可能不是必需的）

subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 300px;
  height: 280px;
  -webkit-columns: 250px;
  -moz-columns: 250px;
  columns: 250px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>

Answer 3

根据提供的信息，容器的宽度似乎不足以容纳包括间隙在内的列，并且需要计算高度以确保列在正确的点断裂。

然后列需要不平衡column-fill: auto;

Codepen 演示

.subMenu {
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  width: 500px;
  height: 260px;
  -webkit-columns: 180px;
  -moz-columns: 180px;
  columns: 180px;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}
.subMenu li {
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<ul class="subMenu categoryMenu1">
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a>
  </li>
</ul>

作为替代方案，也许是 Flexbox。

.subMenu {
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  width: 500px;
  height: 260px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.subMenu li {
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  width: 180px;
}

<ul class="subMenu categoryMenu1">
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a>
  </li>
</ul>

Answer 4

您可以使用 检查此链接columns的属性以获取更多信息。ul