CSS Float on anchor tag приводит к увеличению размера элемента по сравнению с его использованием в элементе списка
При следующей настройке с использованием float на теге привязки, a, это приводит к увеличению размера навигации (по сравнению с использованием его только на li - см. ниже). Почему это так?
nav {
background-color: rgb(25,25,25);
border: 1px solid rgba(255,255,255,.5);
border-left: none;
border-right: none;
}
nav ul {
padding: 0;
margin: 0;
overflow: hidden;
}
nav li {
padding: 0;
margin: 0;
list-style: none;
}
nav a {
float: left;
font-size: .8em;
color: white;
font-weight: normal;
text-decoration: none;
padding: 10px;
border-right: 1px dashed rgba(255,255,255,.75);
transition: all .5s;
}<nav class="clear">
<ul>
<li><a href="#">About The Book</a></li>
<li><a href="#">CSS Properties</a></li>
<li><a href="#">CSS Tips</a></li>
<li><a href="#">CSS Gotchas</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>По сравнению с использованием его в элементе списка следующим образом, меню не увеличивается в высоту
nav {
background-color: rgb(25,25,25);
border: 1px solid rgba(255,255,255,.5);
border-left: none;
border-right: none;
}
nav ul {
padding: 0;
margin: 0;
overflow: hidden;
}
nav li {
float: left;
padding: 0;
margin: 0;
list-style: none;
}
nav a {
font-size: .8em;
color: white;
font-weight: normal;
text-decoration: none;
padding: 10px;
border-right: 1px dashed rgba(255,255,255,.75);
transition: all .5s;
}<nav class="clear">
<ul>
<li><a href="#">About The Book</a></li>
<li><a href="#">CSS Properties</a></li>
<li><a href="#">CSS Tips</a></li>
<li><a href="#">CSS Gotchas</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>4 ответов:
aпо умолчанию является встроенным элементом. Вертикальное заполнение на встроенных элементах не влияет на компоновку-то есть Оно увеличивает область щелчка ваших элементовa, не влияя на их высоту строки (или высоту строки плавающего родительского элементаli). Но у вашегоulестьoverflow: hidden, который зажимает вертикальное заполнение на ваших элементахa, что означает, что вы никогда не сможете использовать эту дополнительную область щелчка, предоставляемую вертикальным заполнением.Плавающий встроенный ящик превращает его в блок таким образом, вертикальное заполнение теперь влияет на расположение каждого элемента
a, как и следовало ожидать с любым блоком (плавающим или нет).
Это потому, что якорные теги (
<a>) изначально являются элементамиinline, на которые не влияют вставки. Плавая по ним, они ведут себя несколько иначе, немного больше похожи наinline-blocks (но не совсем), что приводит к тому, что их заполнение визуализируется в их коробочных моделях.
Причина в том, что тег" anchor " является встроенным элементом. Заполнение не оказывает никакого влияния на встроенные элементы. Поэтому, когда вы пишете
padding=10pxЭто не оказывает никакого влияния на заполнение тега привязки.
Но все встроенные элементы действуют как элементы уровня блока, когда мы используем свойство" float " для них. Поэтому, как только вы пишете "float=left" для якорного тега, он начинает работать как элемент уровня блока. Итак, теперь набивка вступила в силу. Значит теперь прокладка оказывает влияние на якорь тег, потому что это не элемент уровня блока.
С другой стороны, в случае "li" вы не упомянули о какой-либо прокладке. поэтому он остается таким, как есть, даже с float=left.
Я надеюсь, что это полезно.
Если вы ищете способ обойти это:
Примените
display: blockилиinline-blockк вашемуnav a, чтобы получить интервал, как без использования float.
nav { background-color: rgb(25,25,25); border: 1px solid rgba(255,255,255,.5); border-left: none; border-right: none; } nav ul { padding: 0; margin: 0; overflow: hidden; } nav li { float: left; padding: 0; margin: 0; list-style: none; } nav a { font-size: .8em; color: white; font-weight: normal; text-decoration: none; padding: 10px; border-right: 1px dashed rgba(255,255,255,.75); transition: all .5s; display: inline-block; }<nav class="clear"> <ul> <li><a href="#">About The Book</a></li> <li><a href="#">CSS Properties</a></li> <li><a href="#">CSS Tips</a></li> <li><a href="#">CSS Gotchas</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>
Comments