使用滚动垂直溢出在两列中显示ul li项

Question

我想在add中显示两列li个对象，其中的项目垂直滚动，具有固定的高度。

我正在使用css ul规则创建li个对象的列，但此时结果会忽略我指定的列数和columns规则，以及水平溢出。

是否有人知道如何让overflow-y垂直滚动，而是使用2个固定列？

注意 - 我需要将ul保留在一个lis内，因为它们被用作ul控件的一部分。

标记

JQuery Sortable

的CSS

<ul class="twoColsVerticalScroll">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>    
  ... lots of lis ...
</ul>

结果

https://jsfiddle.net/xh4kq0h5/

Answer 1

使用overflow: scroll将您的列表包裹在div中并设置其大小。然后将列宽设置为50％;不要忘记重置ul的边距和填充。

<强>更新

添加FF支持。

＆＃13;

＆＃13;

ul {
    padding: 0;
    margin: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-width: 50%;
       -moz-column-width: 50%;
            column-width: 50%;   
}

div {
    width: 420px;
    height: 200px;
    border: 1px solid;
    overflow-y: scroll;
}

＆＃13;

<div>
  <ul class="twoColsVerticalScroll">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;