Anzeigen ul li Elemente in zwei Spalten mit einem vertikalen vertikalen Überlauf

Question

Ich möchte zwei Spalten von li Objekte innerhalb einer ul mit einer festen Höhe anzeigen, wo die Elemente vertikal scrollen.

Ich erstelle die Spalten von li Objekten der CSS columns Regel verwenden, aber im Moment ignoriert das Ergebnis die Anzahl der Spalten I angeben, und die overflow-y Regel und horizontal statt überläuft.

Weiß jemand wie man die ul mit zwei festen Spalten vertikal zu blättern bekommen?

Hinweis - Ich brauche alle innerhalb eines einzigen ul die lis zu halten, wie sie im Rahmen einer Kontrolle JQuery Sortable verwendeten sind.

Markup

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

Ergebnis

https://jsfiddle.net/xh4kq0h5/

Answer 1

Wickeln Sie Ihre Liste in Div mit overflow: scroll und legen Sie ihre Größen fest. Stellen Sie dann die Breite der Spalten auf 50% ein; Vergessen Sie nicht, die Ränder und Abstände von ul zurückzusetzen.

aktualisieren

Add FF Unterstützung.

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>