Как я могу настроить свое меню на ту же строку, что и мой логотип

Question

Я создаю заголовок с логотипом и меню CSS. Я хочу, чтобы они были как на одной и той же линии, и когда я сделал это, я использовал

#header img, #header ul{ 
display:inline-block; 
} 

Когда я использовал пользовательское меню, который я сделал, это работало отлично. Тем не менее, я решил использовать генератор меню CSS для создания приятного меню. Это сломало его, и я не уверен, в чем проблема.

JSFiddle

Я также заметил, что в jsFiddle, мои парения цвета для ссылок не работает. Он работает нормально локально, поэтому я предполагаю, что это либо проблема jsFiddle, либо я забыл что-то загрузить. Но я просто скопировал и вложил все это, поэтому я не уверен, что это будет. Спасибо!

Answer 1

Here is JsFiddle

Попробуйте добавить отступы к заголовкам, изменение встроенный блок встраивать и удалить ширину :

#header { 
    text-align:center; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding:10px; 
    width:100%; 
} 

показать на нижней Here is Demo:

#header { 
    text-align:center; 

    margin-bottom:0px; 
    padding-top:150px; 
    padding-bottom:10px; 
    width:100%; 
} 
#header img, #header ul{ 
    display:inline; 
} 

Answer 2

Удалить width: 100%; display: block с вашего .menu.

/* Generated via www.cssmenubuilder.com */ 

.menu{margin:0 auto; padding:0; height:30px; background:url('images/topMenuImages.png') repeat-x;} 

Чтобы расположить меню в нижней части добавить следующее:

#header { position: relative; } 

.menu { position: absolute; bottom: 0px; } 

Fiddle

Answer 3

Я не мог просматривать изображение из вашего кода, так что я не уверен, что именно вы хотите. Но я сделал этот простой код, чтобы сделать логотип и меню в той же строке, благодаря чему меню выровнено в середине высоты логотипа/заголовка. Вы можете проверить скрипку HERE

.header{ 
    height: 100px; 
    width: 100%; 
    display: block; 
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    padding: 8px 0; 
    overflow: hidden; 
} 
.logo{ 
    display: inline-block; 
    float: left; 
    padding-left: 15px; 
} 
.menu{ 
    float: right; 
    list-style: none; 
    margin: 0; 
    text-align: right; 
    line-height: 100px; 
    padding-right: 15px; 
} 
.menu li{ 
    display: inline; 
    margin: 0 10px; 
}