在不同列中显示列表项元素

我正在尝试更改 DataLife Engine 模板的外观，我想知道您是否可以帮助我进行对齐。

我有一列显示一些信息，如下所示：

<div class="short-description">
    <div  class="table">
      <ul class="table">

        <li>A</li>

        <li class="odd">B</li>

        <li>C</li>

        <li class="odd">D</li>

        <li>E</li><br>

      </ul>
    </div>
</div>

这看起来像

A
B
C
D
E

我希望它们像这样显示：

A    B    C
D    E

每个“单元格”的内容可以不同。例如。如果B内容较多，我想调整栏目如下：

A    B    C
     B
     B
D    E

所以它会向下延伸，直到显示所有信息。奇数类只会改变该单元格的颜色。

这里是jsfiddle 演示 http://jsfiddle.net/2tEQX/.

为此，您可以将列表项显示为inline-block元素，如下：

ul {
    list-style: none;
    padding: 0;
    font: 0/0 a;  /* Remove space characters between inline-block elements */
}

ul li {
    font: 16px/1 Arial, sans-erif;  /* Reset the font property */
    display: inline-block;
    vertical-align: top;     /* <-- keep the inline elements at the top    */

    background-color: #ddd;  /* For the demo */
    margin: 5px;             /* For the demo */
    width: 200px;            /* For the demo */
}

JSFiddle 演示 http://jsfiddle.net/hashem/9gBJe/.