CSS UL是從另一個UL

Question

我一直在試圖建立其分爲三個部分菜單影響：

JSFIDDLE

現在你看，左邊的菜單從中間菜單的影響，即使我做：

display:inline 

我想也增加級以上則navgroups：

1000px 

或或者刪除這一行，但它不會改變任何內容。

感謝您的幫助！

UPDATE：

除了什麼上面寫的，我想嘗試中等菜單用圖片代替文字，然後我只是說這個：

<img src=".."> 

但圖像會太低了，我想把它放在更高的位置。
有人可以幫助我嗎？

非常感謝支持，偉大的論壇！

Answer 1

如果您仍然無法定位，您可以簡單地在.navgroups div上添加另一個容器。

這裏的CSS與小提琴：http://jsfiddle.net/QE7Yd/4/

.navwrap { 
    text-align:center; 
} 

.navgroups { 
    display:inline-block; 
    background-color:#CC0000; 
} 

.navgroups:before, 
.navgroups:after { 
    display:table; 
    content:''; 
    clear:both; 
} 

.navgroups li { 
    display: inline; 
    padding: 5px; 
} 
.navgroups .menuleft { 
    padding:0px; 
    float: left; 
} 
.navgroups .menumiddle { 
    padding: 0px; 
    float: left; 
} 
.navgroups .menuright { 
    padding: 0px; 
    float: left; 
} 

基本上你是在告訴.navgroups像對待和inline元素，並使用.navwrap說裏面的文字應居中。

Answer 2

如果你想讓它們全部水平排列，你應該將它們全部左移。這是一個update to your fiddle來演示。 ...

.navgroups { 
    margin: 0 auto; 
    display: table; 
} 
.navgroups li { 
    display: inline; 
    padding: 5px; 
} 
.navgroups .menuleft { 
    padding:0px; 
    float: left; 
} 
.navgroups .menumiddle { 
    padding: 0px; 
    float: left; 
    text-align: center; 
} 
.navgroups .menuright { 
    padding: 0px; 
    float: left; 
    text-align: right; 
} 

UPDATE：爲了適應你在更新了圖片，你可以添加上的文字等於圖像高度line-height。我不確定你希望他們如何列隊，但這會讓你調整它。這裏是一個小提琴：http://jsfiddle.net/QE7Yd/7/

Answer 3

ul（像divs）自動帶有display：block，意味着它將佔用它所在的任何容器的整個寬度。如果是我，我會讓三個包含可以處理浮動的uls的div。這裏有一個Fiddle來幫助解釋。所有的div都有一個浮點數，因爲我從來沒有發現它有用於混合不同類型的浮點數。

.navgroups { 
    margin: 0 auto; 
} 
.navgroups .menuleft { 
    padding:0px; 
    float: left; 
} 
.navgroups .menuright { 
    padding: 0px; 
    float: left; 
} 
.navgroups .menumiddle { 
    padding: 0px; 
    float: left; 
    text-align: center; 
} 

此外，要刪除從ul的項目符號點，將此添加到您的CSS，這將防止圖像向下移動。

.navgroups li { 
    list-style-type: none; 
}