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

Question

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

0

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

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

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

JSFiddle

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

onTheInternet 08 янв. 2014, в 18:36

Источник

Теги:

html

css

css3

3 ответа

1

Удалить width: 100%; display: block 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; }

скрипка

putvande 08 янв. 2014, в 15:04

0

Это был отличный ответ. Приму, когда это возможно. Не могли бы вы также показать мне, как поместить мое меню внизу заголовка? Вот скриншот того, что происходит по ссылке
onTheInternet 08 янв. 2014, в 16:54

0

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

.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;
}

Qiqi Abaziz 08 янв. 2014, в 14:40

Ещё вопросы

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

Zaheer Ahmed · Accepted Answer · 2014-01-08T15-57-00.000Z

Вот JsFiddle

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

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

показать внизу. Вот демонстрация:

#header {
    text-align:center;

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

Еще один хороший ответ, но мой следующий вопрос: как я могу получить это меню внизу заголовка?
@onTheInternet проверить обновленную скрипку и CSS