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 для их ширины, между ними есть около 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

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;   
} 

Answer 5

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

CSS-Tricks имеют отличную запись here и пример Codepen, используя <ul>here.

.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 году, так что это может помочь кому-то еще тоже.