在不同的列中显示列表项元素 [英] Display list item elements in different columns

问题描述

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

I'm trying to change the looks of a DataLife Engine template, and I'm wondering if you could help me with alignment.

我有一些信息显示in a colum，like that：

I have some info displayed in a colum, like this:

<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

b $ b

我希望他们像这样显示：

I want them to display like this:

A    B    C
D    E

每个单元格的内容可以不同。例如。如果 B 有更多内容，我想调整列如下：

The content of each "cell" can be different. E.g. if B has more contents, I'd like to adjust the columns as follows:

A    B    C
     B
     B
D    E

信息。

这里是 jsfiddle demo 。

推荐答案

为了做到这一点，你可以显示列表项为 inline-block 元素，如下所示：

In order to do that, you could display the list-items as inline-block elements, as follows:

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演示 。

JSFiddle Demo.

这篇关于在不同的列中显示列表项元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！