выравнивание обернутых текстов по вертикали

Question

Я хочу начать горизонтально завернутые тексты li в линию, теперь он идет вверх. Пожалуйста, смотрите мой пример

HTML

<ul> 
    <li>Long text goes here.</li> 
    <li>Another Longer Text Goes Here</li> 
    <li>Shorter text</li> 
    </ul> 

CSS

ul {width:150px;} 
li {width:30%; display:inline-block;whitespace:pre-line;} 

http://jsfiddle.net/wbu9ksco/

Спасибо.

Answer 1

Использование вертикального выравнивания:

li { 
    vertical-align: text-top; 
} 

Updated fiddle

Answer 2

, так как вы используете атрибут рядный блок для элементов Li, вы можете использовать вертикальное выравнивание, чтобы выровнять их;

li { 
    vertical-align: text-top; 
}