Css горизонтальный интервал навигации
Я пытаюсь создать горизонтальную панель навигации в css с 5 равномерно расположенными ссылками. Надеюсь, HTML останется таким:
<div id = "footer">
<ul>
<li><a href = "one.html">One</a></li>
<li><a href = "two.html">Two</a></li>
<li><a href = "three.html">Three</a></li>
<li><a href = "four.html">Four</a></li>
<li><a href = "five.html">Five</a></li>
</ul>
</div>
Итак, с помощью CSS я хочу равномерно распределить их внутри div нижнего колонтитула. Пока я использую это:
div#footer{
height:1.5em;
background-color:green;
clear:both;
padding-top:.5em;
font-size:1.5em;
width:800px;
}
div#footer ul{
margin:0;
padding:0;
list-style:none;
}
div#footer li{
width:155px;
display:inline-block;
text-align:center;
}
Это работает очень хорошо, но между буквами li есть промежуток, который мне не нужен. Вот почему я использовал 155 пикселей вместо 160 пикселей для их ширины, между каждым li есть пространство около 5 пикселей. Откуда этот интервал? Как мне от этого избавиться? Если я увеличиваю размер шрифта, увеличивается и интервал.
Ответы 5
Если вы используете это:
div#footer li{
width:160px;
display:block;
float: left;
text-align:center;
}
Все выглядит прекрасно: D
Это случилось со мной. К сожалению, это вызвано тем, что браузер берет разрывы строк между элементами списка и отображает их как пробелы. Чтобы исправить это, измените свой HTML на:
<div id = "footer">
<ul>
<li><a href = "one.html">One</a></li><li><a href = "two.html">Two</a></li><li><a href = "three.html">Three</a></li><li><a href = "four.html">Four</a></li><li><a href = "five.html">Five</a></li>
</ul>
</div>
Разве IE не единственный с таким поведением?
Это стандартное поведение, вызванное display: inline.
Я не помню, какой браузер (ы) вызвал это, но, честно говоря, если это происходит в MSIE или FF, то вам нужно найти исправление. По крайней мере, я так на это смотрю.
+1 Спасибо за это, мне кажется, я слышу зов конца 90-х, они хотят вернуть свои баги!
Спасибо за полезные советы
Пробелы между элементами <li> возникают из-за пробелов и символов возврата каретки между ними из-за встроенного стиля. Если вы напишете:
<li><a href = "one.html">One</a></li><li><a href = "two.html">Two</a></li><li><a href = "three.html">Three</a></li><li><a href = "four.html">Four</a></li><li><a href = "five.html">Five</a></li>
Вы не увидите больше места между ними.
Я не уверен, что inline-block будет хорошо отображаться в IE6, поэтому вы можете попробовать подход с плавающей запятой.
inline-block работает с IE5 - это изобретение Microsoft. Однако в Firefox 2 он полностью сломан.
Итак, это была сломанная часть встроенного блока! Не потому, что IE не поддерживал это, а потому, что IE это придумал ;-)
div#footer ul{
margin:0;
padding:0;
list-style:none;
}
div#footer li{
width:155px;
float:left;
display:block;
}
Этот код расположен li по горизонтали, а пробелы между ними. Если вы хотите добавить пробел между элементами li:
div#footer li{
width:155px;
margin-right: 5px; //5px Space between li elements
float:left;
display:block;
}
Это полностью решено с помощью CSS flexbox.
У CSS-Tricks есть отличная запись здесь и пример Codepen с использованием <ul>здесь.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
margin: 0px;
line-height: 40px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
flex: 1 1 auto;
}<ul class = "flex-container">
<li class = "flex-item">1</li>
<li class = "flex-item">2</li>
<li class = "flex-item">3</li>
<li class = "flex-item">4</li>
<li class = "flex-item">5</li>
<li class = "flex-item">6</li>
</ul>Я понимаю, что это довольно давно, но я столкнулся с этой проблемой 7 лет спустя, в 2015 году, так что это может помочь и кому-то другому.
Я предлагаю добавить #footer {overflow: hidden}, чтобы упростить очистку от поплавков (на самом деле это ничего не скроет).