Как поставить logo и меню в ряд?

@Koblan · Регистрация: 13.01.2018

Студворк — интернет-сервис помощи студентам

Как поставить logo и меню в ряд?Да это может для кого то казаться банальным,подскажите если не трудно

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Жилой дом</title>
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container clearfix">
        <img src="img/logo.png" alt="logo" class="logo">
        <div class="header__title">
            <h2>ЖИЛОЙ ДОМ</h2>
            <h3>ЯРОСЛАВСКАЯ ОБЛАСТЬ</h3>
        </div>
        <nav class="header__menu">
            <a href="#">Инфраструктура</a>
            <a href="#">Планировки и цены</a>
            <a href="#">Материалы и отделка</a>
            <a href="#">Документы</a>
            <a href="#">Контакты</a>
        </nav>
        </div>
        </div>
    </header>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
*{
    margin:0px;
    padding: 0px;
    font-family: 'Roboto Slab', serif;
}
.clearfix:after {
  content: "";
  display: table;
  width: 100%;
  clear: both;
}
.container{
    width:1200px;
    margin: 0 auto;
}
.logo{
    margin:11px 18px 15px 0px;
}
.header__title{
    display: inline-block;
 
}
.header__title h2{
     font-size:16px;
}
.header__title h3{
    font-size:13px;
    font-weight:lighter;
}
.header__menu a{
    text-decoration: none;
    color:#000;
    margin-right: -4px;
}

@mrtoxas · 23.06.2018, 15:25

Убираете отступы у лого. Добавляете для лого и блока .header__title vertical-align:middle.
Потом заворачивайте все это дело в ссылку и убирайте из .header__title h1 и h2, тут не место заголовкам.

@Koblan · 23.06.2018, 15:47 **[ТС]**

mrtoxas,vertical-align:middle добавил но нечего не изменилось,может что-то я неправильно делаю

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Жилой дом</title>
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container clearfix">
        <img src="img/logo.png" alt="logo" class="logo">
        <div class="header__title">
            <p>ЖИЛОЙ ДОМ</p>
            <p>ЯРОСЛАВСКАЯ ОБЛАСТЬ</p>
        </div>
        <nav class="header__menu">
            <a href="#">Инфраструктура</a>
            <a href="#">Планировки и цены</a>
            <a href="#">Материалы и отделка</a>
            <a href="#">Документы</a>
            <a href="#">Контакты</a>
        </nav>
        </div>
        </div>
    </header>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
*{
    margin:0px;
    padding: 0px;
    font-family: 'Roboto Slab', serif;
}
.clearfix:after {
  content: "";
  display: table;
  width: 100%;
  clear: both;
}
.container{
    width:1200px;
    margin: 0 auto;
}
}
.logo{
    vertical-align:middle
}
.header__title{
    display: inline-block;
    vertical-align:middle
}
.header__title p{
     font-size:16px;
}
.header__title p{
    font-size:13px;
    font-weight:lighter;
}
.header__menu a{
    text-decoration: none;
    color:#000;
    margin-right: -4px;
}

@AlexZaw · 23.06.2018, 15:50

CSS
1
2
3
.header_menu{
display:inline-block;
}

@mrtoxas · 23.06.2018, 15:53

А, то я невнимательный. Лого и меню же. Для меню тоже задавайте vertical-align:middle

@Koblan · 23.06.2018, 15:57 **[ТС]**

AlexZaw, Я и не заметил)

Добавлено через 2 минуты
mrtoxas, Понятно,спасибо

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.06.2018, 15:25
	Убираете отступы у лого. Добавляете для лого и блока .header__title `vertical-align:middle`. Потом заворачивайте все это дело в ссылку и убирайте из .header__title h1 и h2, тут не место заголовкам. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.06.2018, 15:53
	А, то я невнимательный. Лого и меню же. Для меню тоже задавайте `vertical-align:middle` 1

@Koblan 0 / 0 / 1 Регистрация: 13.01.2018 Сообщений: 65
	23.06.2018, 15:57 [ТС]
	AlexZaw, Я и не заметил) Добавлено через 2 минуты mrtoxas, Понятно,спасибо 0

Как поставить logo и меню в ряд?

Решение