css espacio de navegación horizontal

Question

Estoy tratando de crear una barra de navegación horizontal en CSS con 5 enlaces espaciados uniformemente. El html es de esperar permanecerá así:

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

Así que con CSS, quiero el espacio de manera uniforme dentro del div pie de página. Hasta el momento estoy usando esto:

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

Esto funciona bastante bien, pero no hay separación entre el li es que yo no quiero. Es por eso que he usado 155px en lugar de 160px para su ancho, hay aproximadamente 5px de espacio entre cada li. ¿De dónde viene ese espaciado? ¿Cómo puedo deshacerme de eso? Si aumento el tamaño de fuente, el espaciado aumenta también.

Answer 1

que he tenido que esto ocurra a mí. Desafortunadamente, es causada por el navegador que toma los saltos de línea entre los elementos de la lista y los representa como espacios. Para corregir, cambiar el código HTML a:

<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

Si se utiliza este:

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

Todo parece encantador: D

Answer 3

Los espacios entre los elementos <li> se deben a los espacios en blanco y retornos de carro entre ellos, debido al estilo en línea. Si escribe:

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

No verá más espacio entre ellos.

No estoy seguro de si el bloque en línea se mostrará bien en IE6, por lo que es posible que desee probar el enfoque de flotación.

Answer 4

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

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

Este código se colocó horizontalmente mientras que los espacios entre ellos. Si desea agregar espacio entre los elementos li:

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

Answer 5

Esto ha sido completamente resuelto por CSS flexbox.

CSS-Tricks tiene un excelente writeup here, y un ejemplo de Codepen usando <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>

me di cuenta que es bastante antiguo, pero me encontré con este tema 7 años más tarde en 2015 por lo que esto podría ayudar a alguien más también.