CSS уль зависит от другого уль

Question

Я пытался создать меню, которое разделено на три части:

• Левый
• Средний
• Right

Тогда я сделал это :

JSFIDDLE

Теперь, как вы видите, левое меню зависит от среднего меню, даже если я сделал:

display:inline 

Я попытался также увеличить navgroups класс выше, а затем:

1000px 

или либо удалить эту строку, но ничего не изменит.

Спасибо за помощь!

UPDATE:

В дополнение к тому, что написано выше, я хотел бы попробовать средний-меню с изображением вместо письма, то я просто добавил следующее:

<img src=".."> 

но изображение идет слишком вниз, и я хотел бы сказать, что он более верхний.
Может кто-нибудь, пожалуйста, помогите мне с этим?

Большое спасибо за поддержку, отличный форум!

Answer 1

Если вы все еще возникают проблемы с центровкой, вы можете просто добавить еще один контейнер вокруг .navgroups дел.

Вот 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) приходит автоматически с дисплеем: блок на нем, то есть он будет занимать всю ширину любого контейнера, в котором он находится. Если бы это я, я бы сделал три, содержащие divs для uls, которые будут обрабатывать плавающие. Вот объяснение: 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; 
} 

Кроме того, чтобы удалить пункты пули из ул, добавьте в ваш CSS, что позволит предотвратить изображения от перемещения вниз.

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