Использование свойства inline для блочных элементов

@The_Fat_Man · Регистрация: 04.03.2014

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

Доброго времени суток, уважаемые форумчане! Столкнулся с проблемой при использовании свойства inline. В шапке я применил его к каждому блочному элементу: h1 и меню навигации nav. Не знаю почему, но они все сместились по высоте относительно друг друга и если постовить значение margin-bottom: -5% (например), то по необъяснимым причинам последующий за ним блочный элемент со свойством инлайн поднимается вверх! Я ничего не понимаю, помогите, пожалуста разобраться.

Вот html-код:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title>Главная</title>
    
         <link rel="stylesheet" href="css/new_elements.css">
         <link rel="stylesheet" href="css/style.css">
    
         <script>
             document.createElement('header');
             document.createElement('nav');
             document.createElement('article');
             document.createElement('footer');
         </script>
    </head>
 
    <body>
        <header>
            <a href="index.html">
                <img src="img/logo.png" alt="logo">
            </a>
            
            <h1>Пример резинового сайта</h1>
            
            <nav> 
                <ul> 
                    <li>    
                        <a href="#"> 
                            Главная
                        </a>    
                    </li> 
                    
                    <li> 
                        <a href="#"> 
                            Товары и услуги
                        </a> 
                    </li> 
                    
                    <li> 
                        <a href="#"> 
                            О нас
                        </a> 
                    </li> 
                </ul> 
            </nav>
        </header>           
            
        <article>
            <h2>Подул ветер перемен</h2>
        </article>
 
    </body>
</html>

Код из файла new_elements.css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
header, nav, footer, article {
    display: block;
}
 
nav {
    float: left;
    width: 20%;
}
 
footer {
    clear: both;
}

Код из файла style.css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {
  padding: 0;
  margin: 0;
}
 
body {
    background-color: #dadbdb;
}
 
header {
    background-color: #6e91c1;
    padding: 1% 0% 5% 1%;
}
 
header h1 {
    display: inline;
    font-size: 90%;
}
 
header nav {
    width: 60%;
    margin-left: 50%;
}

Я еще прикрепил картинку, как у меня все это выглядит. P.S. Заранее спасибо, что потратили свое свободное время ради решения или просмотра этой проблемы.

Ссылка на "результат": https://www.cyberforum.ru/atta... 1402739165

@The_Fat_Man · 14.06.2014, 13:49 **[ТС]**

Белые полосы сверху и снизу - это результат моей ужасной работы в редакторе gimp, просто так вышло, что картинку в центр поместило, а разрешение осталось прежним 1366x768, прошу прощения.

@Amestigon · 14.06.2014, 15:20

Лично мне мало, что понятно. Во первых, насколько я понимаю, это только кусок кода. Во вторых не понятно, что вы хотите получить. Ну и на мой скромный взгляд, прежде чем разбираться с inline для начала надо блоки спозиционировать правильно. А тут в одном файле стилей вы nav прижимаете влево и задаете ширину 20%, в другом файле задаете ему 60% и сдвигаете его вправо на 50%. Если вы хотите в левой половине шапки разместить лого и название, а в правой меню, то не легче это сделать двумя блоками, один прижать влево, другой вправо, задать им фиксированную высоту и уже внутри них позиционировать и логотип и меню? Хотя конечно на вкус и цвет...

@The_Fat_Man · 14.06.2014, 15:54 **[ТС]**

Зачем создавать два лишних блока? У них нет никакой семантики. Я стараюсь делать разметку согласно спецификации HTML5. Вы видете весть мой код, просто для наглядности я вырезал только шапку и часть контента, если конечно Вы не желаете увидеть дополнительных 500px серого бэкграунда. Вот за разные параметры ширины у блока <nav> спасибо, проглядел. Брал часть кода из книги для адаптации под старые браузеры и сильно не всматривался в содержание new_elements.css. Да, я хочу спозиционировать все объекты в шапке, хотелось бы знать, как грамотно это сделать, без shitкода. Моя проблема: Например у <h1> я задаю margin-bottom: -20px; при этом почему-то "привязанный" к нему блок <nav> со всем его содержимым поднимается вверх относительно логотипа и заголовка. Я, конечно, могу и так все выровнять, но хотелось бы без этих костылей. Спасибо.

@Amestigon · 14.06.2014, 16:57

Ну во первых семантика подразумевает все таки в первую очередь более наглядный (читабельный) код, а сколько там блоков дело десятое. Ну это диалектика. Во вторых вы сами уже создали два блока. У вас есть блок header и внутри него блок nav. Не хотите лишних блоков, то зачем вам тогда nav нужен? Я так понимаю вы хотите, что бы меню было в одну строку с названием? Ну и упростите все до максимума. Убираем блок nav к чертям. Задаем нужные обтекания. Это изображение и заголовок 1. Им обоим присваиваем свойство float:left. display:inline; задаем списку и элементам. Список отодвигаем от заголовка задав заголовку ширину. Это величины фиксированные, поэтому можно задать жестко, в пикселях. И ссылкам так же присваиваем float:left. И не забываем задать header высоту. Она тоже не изменяемая, поэтому высота фиксированная.
Это как бы сделал я. А вот что у вас не так с вашим кодом, я сказать не могу. Поскольку вы сами и пишите

Сообщение от The_Fat_Man

Столкнулся с проблемой при использовании свойства inline. В шапке я применил его к каждому блочному элементу: h1 и меню навигации nav.

Но в вашем коде я этого не вижу. И у меня макет с вашим кодом выглядит совсем не так как на вашем изображении. Ссылки не линейные и не оформлены.

@The_Fat_Man · 14.06.2014, 18:44 **[ТС]**

Спасибо за проявленный интерес к моей проблеме. Я ее уже решил. Добавил свойство

CSS
1
float: right;

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

@Lovrentiy · 14.06.2014, 20:20

Не претендую на оригинальность, но по-моему у свойства inline, как и у inline-block все элементы выстраиваются по нижнему краю, то есть в зависимости от высоты тех или иных элементов, вылезать будут "более высокие" именно вверх, а не вниз, что может привести к "неверному" отображению. Поправьте если не прав, не перечитывал основы.

Попробуйте использовать свойство float

Добавлено через 40 секунд
Извиняюсь, тему не обновил, была в закладках, не увидел последнего сообщения. Мое сообщение более не акуально

@The_Fat_Man · 14.06.2014, 22:16 **[ТС]**

Тут-то вы неправы

Столкнулся с еще одной, наверное детской, проблемой: могу выстроить элементы списка в горизонтальном порядке, но как только пытаюсь паддингами увеличить "рамочку" вокруг них, последний элемент(ы) списка переходят на новую строку, как этого избежать. Я прикрепил к своему сообщение еще две картинки: желаемый результат и суровая реальность. Можете помочь?

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="ru" dir="ltr" id="html">
    <head>
    <meta charset="utf-8">
    <title>VNA | Главная</title>
    
    <link rel="stylesheet" href="css/new_elements.css">
    <link rel="stylesheet" href="css/style.css">
    
    <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('article');
        document.createElement('footer');
    </script>
    </head>
    <body>
        <header>
            <a href="index.html">
                <img src="img/logo.png" alt="VNA.BY_logo">
            </a>
            
            <nav>
                <ul> 
                    <li>    
                        <a href="#"> 
                            Главная
                        </a>    
                    </li> 
                    
                    <li> 
                        <a href="#"> 
                            Товары и услуги
                        </a> 
                    </li> 
                    
                    <li> 
                        <a href="#"> 
                            О нас
                        </a> 
                    </li> 
                </ul> 
            </nav>
        </header>           
            
        <article>
            <h2>Подул ветер перемен</h2>
        </article>
 
    </body>
</html>

Код файла new_elements.css:

CSS
1
2
3
4
5
6
7
header, nav, footer, article {
    display: block;
}
 
footer {
    clear: both;
}

Код файла style.css:

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
36
37
38
39
40
41
42
43
44
45
46
47
* {
  padding: 0;
  margin: 0;
}
 
body {
    background-color: #dadbdb;
}
 
header {
    background-color: #6e91c1;
    padding: 0.6% 0% 2% 2.2%;
}
 
header a img {
    border: none;
    /*width: 11%;*/
    width: auto;
}
 
header nav {
    /*display: inline;*/
    float: right;
    background-color: green;
    /*width: 70%;*/
    /*width: auto;*/
}
 
header nav ul {
    /*display: inline;*/
    margin: 0; 
    background-color: red;
}
 
header nav ul li {
    display: inline; 
    border: 1px solid #000; 
    padding: 5% 5% 5% 5%;
    background-color: blue;
}
 
header nav ul li a {
    text-decoration: none;
    font-family: Arial;
    color: #ffffff;
    font-size: 2.7rem;
}

Обещанные картинки:

@Lovrentiy · 14.06.2014, 22:34

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
36
37
38
39
40
body {
    background-color: #dadbdb;
}
 
header {
    background-color: #6E91C1;
    overflow:hidden;
}
 
header a img {
    border: none;
}
 
header nav {
    float: right;
    min-width:900px;
    width:auto;
    
}
 
header nav ul {
    background-color: red;
    list-style:none;   
}
 
header nav ul li {
    float: right; 
    padding:2% 5%;
}
 
header nav ul li:hover{
    background-color:#607FA9;
}
 
header nav ul li a {
    text-decoration: none;
    font-family: Arial;
    color: #ffffff;
    font-size: 2.6em;
}

@The_Fat_Man · 14.06.2014, 23:15 **[ТС]**

Ух ты! Большое Вам спасибо! Если Вас не затруднит, не могли бы Вы объяснить, как получилось, что элементы списка выстроились горизонтально и как в данном случае свойство overflow работает в шапке. Знаю, что свойство hidden "Отображает только область внутри элемента, остальное будет скрыто." Но как это повлияло на масштабируемость картинки? И последний вопрос: когда я "объявил" блок <nav> с его содержимым, визуально он у меня был на уровень ниже тега с картинкой, и мне приходилось эдаким костылем margin-bottom: -2%; (применимым к картинке) поднимать все меню повыше?

@Lovrentiy · 15.06.2014, 09:11

Для начала я задал минимальный размер для nav, благодаря этому блоки не смещаются пока их базовая ширина не превысит 900px.
Свойство overflow:hidden не только скрывает всё что выходит за его границы блока, в случае когда у блока нет заданной величины он "натягивается" на дочерние блоки, таким образом родительский контейнер будет по размерам не меньше всех дочерних элементов.
У пунктов li используется padding, благодаря ему меню в элементе nav примерно на одном уровне с логотипом (у меня логотипа небыло, поэтому это совпадение случайно, я использовал приложенную Вами картинку "как должно быть".

@The_Fat_Man · 15.06.2014, 11:44 **[ТС]**

Благодарю!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@The_Fat_Man 10 / 10 / 3 Регистрация: 04.03.2014 Сообщений: 140
	14.06.2014, 13:49 [ТС]
	Белые полосы сверху и снизу - это результат моей ужасной работы в редакторе gimp, просто так вышло, что картинку в центр поместило, а разрешение осталось прежним 1366x768, прошу прощения. 0

@Amestigon 33 / 32 / 15 Регистрация: 12.06.2014 Сообщений: 119
	14.06.2014, 15:20
	Лично мне мало, что понятно. Во первых, насколько я понимаю, это только кусок кода. Во вторых не понятно, что вы хотите получить. Ну и на мой скромный взгляд, прежде чем разбираться с inline для начала надо блоки спозиционировать правильно. А тут в одном файле стилей вы nav прижимаете влево и задаете ширину 20%, в другом файле задаете ему 60% и сдвигаете его вправо на 50%. Если вы хотите в левой половине шапки разместить лого и название, а в правой меню, то не легче это сделать двумя блоками, один прижать влево, другой вправо, задать им фиксированную высоту и уже внутри них позиционировать и логотип и меню? Хотя конечно на вкус и цвет... 0

@The_Fat_Man 10 / 10 / 3 Регистрация: 04.03.2014 Сообщений: 140
	14.06.2014, 15:54 [ТС]
	Зачем создавать два лишних блока? У них нет никакой семантики. Я стараюсь делать разметку согласно спецификации HTML5. Вы видете весть мой код, просто для наглядности я вырезал только шапку и часть контента, если конечно Вы не желаете увидеть дополнительных 500px серого бэкграунда. Вот за разные параметры ширины у блока <nav> спасибо, проглядел. Брал часть кода из книги для адаптации под старые браузеры и сильно не всматривался в содержание new_elements.css. Да, я хочу спозиционировать все объекты в шапке, хотелось бы знать, как грамотно это сделать, без shitкода. Моя проблема: Например у <h1> я задаю margin-bottom: -20px; при этом почему-то "привязанный" к нему блок <nav> со всем его содержимым поднимается вверх относительно логотипа и заголовка. Я, конечно, могу и так все выровнять, но хотелось бы без этих костылей. Спасибо. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	14.06.2014, 20:20
	Не претендую на оригинальность, но по-моему у свойства inline, как и у inline-block все элементы выстраиваются по нижнему краю, то есть в зависимости от высоты тех или иных элементов, вылезать будут "более высокие" именно вверх, а не вниз, что может привести к "неверному" отображению. Поправьте если не прав, не перечитывал основы. Попробуйте использовать свойство float Добавлено через 40 секунд Извиняюсь, тему не обновил, была в закладках, не увидел последнего сообщения. Мое сообщение более не акуально 0

@The_Fat_Man 10 / 10 / 3 Регистрация: 04.03.2014 Сообщений: 140
	14.06.2014, 23:15 [ТС]
	Ух ты! Большое Вам спасибо! Если Вас не затруднит, не могли бы Вы объяснить, как получилось, что элементы списка выстроились горизонтально и как в данном случае свойство overflow работает в шапке. Знаю, что свойство hidden "Отображает только область внутри элемента, остальное будет скрыто." Но как это повлияло на масштабируемость картинки? И последний вопрос: когда я "объявил" блок <nav> с его содержимым, визуально он у меня был на уровень ниже тега с картинкой, и мне приходилось эдаким костылем margin-bottom: -2%; (применимым к картинке) поднимать все меню повыше? 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	15.06.2014, 09:11
	Для начала я задал минимальный размер для nav, благодаря этому блоки не смещаются пока их базовая ширина не превысит 900px. Свойство overflow:hidden не только скрывает всё что выходит за его границы блока, в случае когда у блока нет заданной величины он "натягивается" на дочерние блоки, таким образом родительский контейнер будет по размерам не меньше всех дочерних элементов. У пунктов li используется padding, благодаря ему меню в элементе nav примерно на одном уровне с логотипом (у меня логотипа небыло, поэтому это совпадение случайно, я использовал приложенную Вами картинку "как должно быть". 1

@The_Fat_Man 10 / 10 / 3 Регистрация: 04.03.2014 Сообщений: 140
	15.06.2014, 11:44 [ТС]
	Благодарю! 0

Использование свойства inline для блочных элементов

Решение