Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Почему меню не выстраивается в ряд?

Автор: GQU 16.6.2011, 17:57

Почему меню не выстраивается в горизонтальный ряд, написано же display:inline;?

Код


<title>Создание базового горизонтального меню для сайта CSS методами</title>
</head>
<style type="text/css">
ul.css-menu-1 {
list-style: none;
}

ul.css-menu-1 li a {
display:inline;
background-color:#006600;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
font-weight: bold;
color: #ffaa00;
padding: 6px 10px 6px 10px
}
</style>
<body>
<ul class="css-menu-1">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#">Справочник</a></li>
</ul>
<head>

Автор: bars80080 16.6.2011, 19:21

во-первых, проблема в тэгах вводящих сумятицу
а display: inline задано ссылке, а не элементу списка li, который остаётся по-умолчанию блоковым

Автор: GQU 16.6.2011, 20:18

Цитата

а display: inline задано ссылке, а не элементу списка li, который остаётся по-умолчанию блоковым

А почему нужно задавать display: inline именно элементу li?

Автор: bars80080 16.6.2011, 22:37

Цитата(GQU @ 16.6.2011, 20:18

)

А почему нужно задавать display: inline именно элементу li?

дык, он же блочный. по-умолчанию он выстраивается в вертикальный список.
а ссылка и так по-умолчанию inline (в строку), но она же в блоке li.

Автор: GQU 17.6.2011, 12:46

Цитата

А вот есть же такое правило, что каждое следующее значение стиля дочернего элемента, перекрывает значение такого же стиля у его родительского элемента.
Смотрим наш пример:
<а>является дочерним для<li>, поэтому можно <а> присвоить inline и по правилу выше inline присваивается и <li>
Почему так не происодит?

Автор: bars80080 17.6.2011, 14:00

Цитата(GQU @ 17.6.2011, 12:46

)

каждое следующее значение стиля дочернего элемента, перекрывает значение такого же стиля у его родительского элемента.

, для дочернего элемента

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

однако, правило даже так далеко не полное. так как есть наследуемые стили, вроде цвета, а есть не наследуемые в неявном виде.
к примеру, если задать для

div { display: block; color: #ffff00; }

здесь стиль color унаследуется всеми вложенными элементами, кроме ссылок. а стиль display никем не унаследуется
чтобы он распространился дальше, надо было бы написать:

div * { display: block; color: #ffff00; }

Автор: SelenIT 17.6.2011, 14:11

Цитата(GQU @ 17.6.2011, 12:46

)

каждое следующее значение стиля дочернего элемента, перекрывает значение такого же стиля у его родительского элемента

Имеется в виду, что любой явно заданный стиль потомка приоритетнее стиля, унаследованного от предка. Не наоборот. "Дети" на "родителей" в CSS напрямую не влияют (кроме, пожалуй, нюансов с наложением маргинов, но это совсем другая песня).