製作一個嵌套列表內嵌顯示

Question

我有以下列表：

<ul id="inline"> 
<li><a href="#">One</a> 
    <ul> 
    <li><a href="#">Inline1</a></li> 
    <li><a href="#">Inline2</a></li> 
    </ul> 
</li> 
<li><a href="#">Two</a> 
    <ul> 
    <li><a href="#">Inline1</a></li> 
    <li><a href="#">Inline2</a></li> 
    </ul> 
</li> 
</ul> 

我想展示的是第一級李新線和嵌套列表出現在相同的高度其父但直列。就像這樣：

One Inline1 Inline2 
Two Inline1 Inline2 

這就是我現在所擁有的：

#inline { 
    width: 100%; 
    list-style-type: none; 
    padding:0; 
    margin:0; 
} 

#inline + ul > ul { 
    display:inline; 
} 

但我要的CSS的基本認識，搞清楚什麼錯誤。

Answer 1

您需要設置ul（的#inline子）和孩子li「這些ul S的s到display:inline;。該CSS是：

DEMO

#inline ul, #inline ul li { 
    display:inline; 
    padding:0; 
} 

Answer 2

我有一個簡單的解決方法。讓我們看看小提琴。

OLD：http://jsfiddle.net/kiranvarthi/sfho4xn8/ 更新小提琴：http://jsfiddle.net/kiranvarthi/sfho4xn8/2/

#inline { 
    width: 100%; 
    list-style-type: none; 
    padding:0; 
    margin:0; 
} 

#inline ul li { 
    display:inline; 
} 

Answer 3

使用此CSS，使其工作

#inline { 
    width: 100%; 
    list-style-type: none; 
    padding:0; 
    margin:0; 
} 

#inline ul { 
    display:inline-block; 
    list-style:none; 
    margin-left:-30px; 
} 

#inline ul li { 
    display:inline-block; 
    list-style:none; 
    text-decoration:none; 
    margin-left:0px; 
}