垂直排列包裹的文本

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

使用vertical align：

li {
   vertical-align: text-top;
}

Updated fiddle

Answer 2

因为您正在为li元素使用inline-block属性， 你可以使用vertical-align来排列它们;

li {
    vertical-align: text-top;
}