0

順序付けされていないリストを並べて表示しようとしていますが、cssルールを使用して表示方法を一致させても機能しません。

これが私のコードです：

<ul class="outterList">
    <li>
       <span class="bigText">Main</span>
    </li>
    <li>
       <span class="medText">Included</span>
       <ul class="innerList">
            <li>TestMessage - text</li>
            <li>bla - text</li>
            <li>asffadgsd - text</li>
            <li>iuygouhlubrsf - text</li>
            <li>New Test - text</li>
            <li>TestFileName - photo</li>
            <li>TestFileName2 - photo</li>
            <li>jvv - photo</li>
            <li>ujjjjjjjjjjj - photo</li>
            <li>MR. Bean - text</li>
        </ul>
    </li>
</ul>

そして私のCSS：

.outterList{
    display: inline ;       
}

.innerList{
    display: block;
}

私が見せようとしているのは、次のようなものです。

        List1(empty list)           List2

                                    *item1

                                    *item2

誰もがこれを修正する方法を知っていますか？

4

1 に答える 1

1 
.outterList{
    display: block;  
}

.outterList > li {
    display: inline-block;
    vertical-align: top;
}

デモ： http： //jsfiddle.net/Q8qNj/4/

于 2012-08-08T20:16:51.137 に答える