Вертикальное заполнение горизонтального меню на теге привязки не влияет

Мне интересно, почему в следующем примере верхнее и нижнее заполнение не влияет на тег привязки, а левое и правое?

<ul id="nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>

    #nav{
        list-style:none;
    }
    #nav li{
        border:1px solid #666;
        display:inline;
       /*If you do it this way you need to set the top and bottom 
         padding to be the same here as under #nav li a
        padding:8px 0; */
    }
    #nav li a{
        padding:8px 16px;
    }

Пример: Ссылка

Итак, мой главный вопрос: почему верхнее и нижнее заполнение не влияет на элементы списка, а левое и правое?

Я попробовал это с плавающей запятой вместо display:inline в списке пункт, и он работал, как я ожидал. Итак, я думаю, если бы у меня был второстепенный вопрос, это была бы разница между float:left; и дисплей: встроенный? Я читал спецификацию float, и мне показалось, что float все еще box онлайн, встроенный в строку, что-то вроде встроенного блока?

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

Спасибо
Леви


css css-float
person Levi    schedule 14.04.2010    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Якоря — это встроенные элементы. Только элементы уровня блока могут иметь измененные атрибуты верхнего/нижнего уровня.

Вы можете переопределить, выполнив:

a
{
    display: block;
    float: left;
}

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

person Danten    schedule 14.04.2010
comment
Я предпочитаю оформлять LI как float:left, а затем использовать display:block, padding, border и margin для самого A. - person Diodeus - James MacFarlane; 14.04.2010
comment
Использование сброса CSS также может помочь поддерживать согласованность между браузерами при использовании списков. См.: developer.yahoo.com/yui/3/cssreset. - person Diodeus - James MacFarlane; 14.04.2010
comment
Есть бесконечные способы достижения желаемого результата. Я никогда не устанавливал блокировку всех якорей, но это был просто прямой пример :) - person Danten; 14.04.2010
comment
@Diodeus - Ах да, во втором примере выше я сделал именно это. @Danten - Спасибо за ответ, вы случайно не знаете, где я могу найти документацию по встроенному и блочному и различиям? Я прочитал этот w3.org/TR/CSS2/visuren.html, но не видел, чтобы в нем прямо говорилось, что встроенные атрибуты не могут быть изменены сверху/снизу. - person Levi; 14.04.2010
comment
Леви: Большую часть своих практических знаний о дизайне я почерпнул из книги Bulletproof Webdesign. Если вы можете получить его по дешевке, оно того стоит, даже несмотря на то, что ему уже несколько лет. Что касается различий между встроенным и блочным, попробуйте эту ссылку веб-дизайн с нуля. com/html-css/css-block-and-inline.php. Самое важное отличие состоит в том, что блоки охватывают всю страницу, а встроенные — нет. - person Danten; 14.04.2010

arrow_upward
4
arrow_downward

Темный угол спецификации CSS на самом деле указывает на то, что display: block является ненужным дополнением к float: left.

Причина для бессмысленного заполнения - это... встроенные элементы. Интересный факт: встроенные элементы будут принимать значения заполнения, но это заполнение не повлияет на макет окружающего содержимого.

Чтобы получить желаемые результаты с учетом приведенной выше разметки и стилей, я бы предложил просто изменить значение display элементов li на inline-block и использовать значение line-height или position: relative и т. д. для управления вертикальной композицией ссылок, ограничивая все ваши значения поля. к элементам списка.

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

При работе с подобными решениями необходимо помнить о трех проблемах поддержки:

  1. В IE6 display: inline-block применяется только к элементам, у которых во время выполнения display значение inline. Спецификация HTML4 может помочь вам отличить овец от козлов.
  2. Firefox 2.x не поддерживает значение inline-block, но имеет расширение CSS -moz-inline-block.
  3. Промежуточные исходные пробелы отображаются между встроенными блочными элементами так же, как и между встроенными элементами, что может привести к нежелательным результатам при отсутствии тщательного форматирования исходной разметки.
person Ben Henick    schedule 14.04.2010
comment
Бен, спасибо за .. встроенные элементы будут принимать значения заполнения, но это дополнение не повлияет на макет окружающего содержимого. Я давно забыл об этом поведении и был удивлен, когда я объявил padding-bottom в навигационной ссылке, чтобы сместить ее подчеркивание — просто попытался ожидать, что это не сработает — и это сработало! Поиск объяснения привел меня сюда. Удобное (предназначенное?) поведение для использования в классах оформления, например .current-page в навигации. - person Arta; 20.12.2019