css - CSS リストをインラインで、次に下に配置

Question

サイトの検索パネルを作成する必要があります。私は数時間試してみましたが、何もありません...これが私の現在のフィドルです。

http://jsfiddle.net/p4z8q/

私は持っている必要があります

<ul class='next_list'>

下に表示される

<ul class='choise_list'>

そして次のリストと次...

Answer 1

これを追加

ul {
    display:inline;
}

後のCSS

ol,ul,li { }

Answer 2

.question_list>li{overflow: hidden;}

Answer 3

float を削除して、display inline-block を使用してみてください。css を次のように修正しました。

ol,ul,li{
    padding:0;
    margin-right:2px;
    /*background:red;*/
}
.choice_list>li,
.next_list>li {
    background-color: red;
}
.question_list {
    list-style-type:none;
}

#some{background:green;}

.choice_list li {
    /*  float:left; */
    display: inline-block;
    list-style-type:none;
    width:10%;
}
.next_list li {
    /* float:left; */
   display: inline-block;
   list-style-type:none;
   width:10%;
}

Answer 4

overflow:hiddenulを追加するだけです：

ul{
    overflow:hidden;
}

フィドルを見る

Answer 5

これを追加：

.next_list{
   clear:left;
}