これらのli要素を互いにどのように設定するのですか？

Question

test3をtest2の下に置き、test2をtest1の下に置く方法を教えてください。私は/李時間が中央応答ULを取得する方法を把握しようとするために忙しかった

JSFiddle

HTML

<div class="wrapper"> 
    <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
    <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
    <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 

CSS

.wrapper { 
    text-align: center; 
} 
ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    *display: inline; 
    list-style-type: none; 
} 
li { 
    float: left; 
    padding: 5px 5px; 
    border: 1px solid black; 
} 

Answer 1

あなたのを削除するだけですliの。

.wrapper { 
 
    text-align: center; 
 
} 
 
ul { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    /* display: inline; */ 
 
    list-style-type: none; 
 
} 
 
li { 
 
    padding: 5px 5px; 
 
    border: 1px solid black; 
 
}

<div class="wrapper"> 
 
    <ul> 
 
     <li>Test1</li> 
 
     <li>Test2</li> 
 
     <li>Test3</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
    </ul> 
 
</div>

JSFiddle

Answer 2

あなたはフロートプロパティが必要な場合は、その後リーにULから表示プロパティを移動し、左に明確なプロパティを追加します。

ul { 

    margin: 0; 
    padding: 0; 
    *display: inline; 
    list-style-type: none; 
} 
li { 
    display: block; 
    float: left; 
    clear: left; 
    padding: 5px 5px; 
    border: 1px solid black; 
}