allineare due liste non ordinate fianco a fianco a partire dalla cima

Question

ho due ULS allineati uno accanto all'altro in div separati:

div{ display:inline-block; width:320px; }

<div> 
    <ul> 
    <li>line 1</li> 
    <li>line 2</li> 
    </ul> 
</div> 

    <div> 
    <ul> 
    <li>line 1</li> 
    <li>line 2</li> 
    <li>line 3</li> 
    <li>line 4</li> 
    <li>line 5</li> 
    </ul> 
    </div> 

Questo appare bene quando i due sono uno accanto all'altro e hanno lo stesso numero di elementi, ma il div con il minor numero di elementi è spinto verso il basso e sembra molto disallineato. Non sono sicuro di come assicurarsi che il div superiore o il suo ul siano allineati in alto in modo che gli elementi figlio, ecc. Non appaiano in basso.

edit: Link jsfiddle: https://jsfiddle.net/v0bzkhqq/

Sembra utilizzando vertical-align: text-top; funzionerà .. quindi ora mi sento lento.

Answer 1

ho aggiunto "vertical-align : superiore "alle div e questo lo farà.

Answer 2

È possibile float: left gli elenchi non ordinati e impostare ancora la larghezza per loro.

div { 
    float: left; 
    width: 320px; 
} 

Ecco un UPDATE fiddle

:

È inoltre possibile aggiungere un vertical-align: top; se si desidera mantenere display: inline-block;

div { 
    display: inline-block; 
    width: 320px; 
    vertical-align: top; 
} 

Fiddle link