0

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 デモです。

4

2 に答える 2

3

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 デモ。

于 2014-01-28T15:23:12.720 に答える
1

jsfiddleを見てください

.table ul{
    list-style: none;
    width: 180px;
    height: auto;
}

.table li{
    display: inline-block;
    vertical-align: top;
    width: 50px;
    background: rgba(0,0,0,0.2);
    margin: 3px;
}
于 2014-01-28T15:28:33.170 に答える