2列のul li項目をスクロール垂直オーバーフローで表示する

Question

liオブジェクトの2つの列をul内に表示したい場合は、アイテムが垂直方向にスクロールする高さが固定されています。

私は、CSS columnsルールを使用してliオブジェクトの列を作成していますが、現時点では、結果は私が指定した列の数、およびoverflow-yルールを無視し、代わりに水平にオーバーフローします。

ulを2つの固定列で垂直方向にスクロールさせる方法を知っている人はいますか？

注 - 私は、彼らがJQuery Sortable制御の一部として使用されているように、単一のul内のすべてのlisを維持する必要があります。

マークアップ

<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> 

のCss

.twoColsVerticalScroll { 
    height: 100px; 
    width: 400px; 
    overflow-y: scroll; 
    background-color: red; 
    -moz-columns: 2 100px; 
    -webkit-columns: 2 100px; 
    columns: 2 100px; 
} 

結果

https://jsfiddle.net/xh4kq0h5/

Answer 1

divのリストをoverflow: scrollで囲み、サイズを設定します。次に列の幅を50％に設定します。マージンとパディングをリセットすることを忘れないでください。ul

更新

FFのサポートを追加します。

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; 
 
}

<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>