2012-11-07 112 views
0

我有一個ul工作正常,但是當我添加一個嵌套ul上面的li,移動。有誰知道爲什麼?如何解決它?通過嵌套列表移動

我這裏的例子:http://jsfiddle.net/y5DtE/

HTML:

<ul> 
    <li> first 
     <ul> 
      <li> 1.2 </li> 
     </ul> 
    </li> 
    <li> second </li> 
    <li> third eally, really long </li> 
</ul>​ 

CSS:

body { 
    margin:0px; 
} 

ul { 
    margin:40px auto; 
    list-style-type:none; 
    padding:0; 
    text-align: center; 
} 

ul li { 
    padding: 0 15px; 
    margin-right: 5px; 
    background-color: #f2f2f2; 
    display: inline-block; 
    height: 30px; 
    line-height: 30px; 
    font-family: verdana; 
    font-size:10px; 
    color: #666 
} 

ul li:last-child { margin-right: 0px; } 

ul li ul { 
    margin:5px 0; 
}​ 
+0

有關使用表如何? – Vucko

回答

1
li { 
    position: relative; 
} 

ul ul { 
    position: absolute; 
    left: 0; 
} 
+0

它的工作原理。如果我明白你相對於李的位置絕對有能力。但我還是不明白爲什麼沒有這個,李先生動了? – Nrc

+0

,因爲元素默認情況下將自己定位到其父元素的底部;隨着第一個李變得更大,看起來好像李的其餘部分放下了自己,事實上他們在相同的基線上。當你使用position:absolute時,ul會從li的上下文中取出,並且它們再次共享相同的高度。 – Ozrix

+0

有沒有辦法來居中嵌套李或給他們相同的父母(當父寬度取決於單詞的寬度) – Nrc

1

爲了使父元素下的子表去申請這樣的:

ul li { 
    display: block; 
    float: left; 
} 

爲防止漂浮的子項中添加以下規則:

ul li ul li{ 
    float: none; 
} 
+0

我想先把1.2放在下面,不要旁邊。問題是,當我把1.2 – Nrc

+0

「第一個」移動如何:http://codepen.io/anon/pen/uvItg – Serg

+0

好吧,它解決了問題,但菜單不居中。如果我把你的浮球:留在ul裏更好。然後問題出現,嵌套不尊重父母。我仍然不明白爲什麼沒有浮動:左,李移動?無論如何,你解決了第一個問題。謝謝!。 – Nrc