горизонтальный интервал навигации css

Question

Я пытаюсь создать горизонтальную панель навигации в 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#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;
}

Это работает довольно хорошо, но есть промежутки между ли, которые я не хочу. Вот почему я использовал 155px вместо 160px для их ширины, между каждым li было вставлено около 5px пространства Откуда этот интервал? Как я могу избавиться от этого? Если я увеличу размер шрифта, интервал также увеличится.

Answer 1

У меня было такое со мной. К сожалению, это вызвано тем, что браузер разрывает строки между элементами списка и отображает их как пробелы. Чтобы исправить, измените свой 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>

Answer 2

Если вы используете это:

div#footer li{
  width:160px;
  display:block;
  float: left;
  text-align:center;
}

Все выглядит прекрасно: D

Answer 3

Пробелы между вашими <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>

Между ними больше не будет пробелов.

Я не уверен, хорошо ли будут отображаться встроенные блоки в IE6, поэтому вы можете попробовать использовать метод float.

Answer 4

Это полностью решено CSS flexbox.

CSS-трюки имеют отличную запись здесь и пример 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 году, так что это может помочь и кому-то еще.

Answer 5

div#footer ul{
    margin:0;
    padding:0;
    list-style:none;
}

div#footer li{
    width:155px;
    float:left;
    display:block;        
}

Этот код расположен горизонтально, а пробелы между ними. Если вы хотите добавить пробел между элементами li:

div#footer li{
    width:155px;
    margin-right: 5px; //5px Space between li elements 
    float:left;
    display:block;        
}