Distribuir uniformemente enlaces a través de una navegación horizontal

Estoy tratando de encontrar un método simple para obtener todos los enlaces distribuidos uniformemente sobre la navegación horizontal. Esto sería muy fácil si se tratara de una cantidad fija de enlaces, pero serán dinámicos.Distribuir uniformemente enlaces a través de una navegación horizontal

Así que podría ser 5 o 10 enlaces, nadie lo sabe. A pesar de la cantidad de enlaces que me gustaría que se extiendan de manera uniforme a través de la navegación sin usando una tabla.

La razón por la que no quiero usar una tabla es porque romperá la estructura UL LI que (aparentemente) se considera el camino a seguir cuando se construye una navegación (SEO).

Aquí hay una jsFiddle explicar más en profundidad: http://jsfiddle.net/pkK8C/19/

Buscando el método más luz.

Gracias de antemano.

Fuente

2012-02-20 Rick Kuipers

por lo que desea caber tantos elementos de navegación dentro de 400px o el ancho no importará? Puedo decir que puede necesitar usar Javascript para lograr eso. –

@JaspreetChahal Sí, creo que ... todavía no sabría cómo hacerlo, ¿hay alguna forma de calcular el ancho de una palabra en js?O tendríamos que simularlo en un div invisible y tomar el ancho de ese div ... –

Bueno, para mí necesitarás tener algunos límites duros en el elemento externo y luego renderizar tus elementos internos. Aquí hay una buena publicación que puede leer para obtener anchos de texto http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript en js. He aquí algo que hice en jsfiddle http://jsfiddle.net/pkK8C/27/ pero que no se acomodará si los enlaces exceden cierto límite –

Uso display: table para UL y display: table-cell para LI. Y display-table.htc para IE6/7 si son importantes.

Fuente

2012-02-20 23:44:41

Para que esto funcione, creo que el ancho de la UL debe establecerse en 100% (es decir, ancho: 100%) –

@ pwee167 Eso es bastante obvio. ;-) –

Encuentro que usar el atributo CSS 'max-width' para elementos de primer nivel' LI' puede ser útil si la primera columna contiene solo textos cortos y las otras tienen textos de enlace más largos. Los navegadores modernos parecen funcionar. – sampoh

navegador antiguo puede ser un dolor de cabeza, pero funciona para los nuevos:

div#navigation ul { 
    list-style-type:none; 
    height:30px; 
    text-align:center; 
    width: 100%;  /* new */ 
    display: table; /* updated */ 
} 

div#navigation ul li {   
    margin-left:50px; 
    display: table-cell; /* updated */ 
}

Fuente

2012-02-20 23:43:57

La compatibilidad me molestaba pero desde que Marat Tanalin me señaló a display-table.htc voy a aceptar su respuesta. +1 de mí para el ejemplo de código. –

Aquí hay una solución de jQuery que distribuye uniformemente los enlaces al 100% del elemento de confinamiento. Los enlaces situados más a la izquierda y más a la derecha se unen hasta los extremos.

jQuery:

pad_menu() aumenta relleno hasta el último li flota por debajo de la primera luego disminuye relleno por uno, por lo que la última li está de vuelta en la misma línea. var interrumpe el ciclo infinito (lo que nunca debería ocurrir de todos modos).

$(document).ready(function(){ 
    pad_menu(); 
    }); 

    function pad_menu() { 
    var i = 0; 
    var pos_first; 
    var pos_last; 
    var pad = $('#menu li').css('padding-left').replace(/[px]/, ''); 

    do { 
     pad++; 
     $('#menu li').css('padding-left', pad); 
     $('#menu .first-item').css('padding-left', 0); 
     $('#menu .last-item').css('padding-left', 0); 
     pos_first = $('#menu .first-item').position(); 
     pos_last = $('#menu .last-item').position(); 
    } while (pos_first.top == pos_last.top && ++i < 100) 
    $('#menu li').css('padding-left', pad-1); 
    $('#menu li.first-item').css('padding-left', 0); 
    $('#menu li.last-item').css('padding-left', 0); 
    }

HTML & CSS:

ul#menu li { 
display: inline; 
float: none; 
padding: 5px 0px 5px 20px; 
} 
ul#menu li.first-item, ul#menu li.last-item { 
padding-left: 0px; 
} 

<ul id='menu' class='cols'> 
    <li class='first-item'><a href='page1.html'>Page 1</a> 
    <li><a href='page2.html'>Page 2</a></li> 
    <li><a href='page3.html'>Page 3</a></li> 
    <li><a href='page4.html'>Page 4</a></li> 
    <li><a href='page5.html'>Page 5</a></li> 
    <li><a href='page6.html'>Page 6</a></li> 
    <li><a href='page7.html'>Page 7</a></li></a></li> 
    <li class='last-item'></li> 
</ul>

Fuente

2012-07-13 10:26:55

Hay una solución más agradable aquí, donde se utiliza text-align:justify:

How do I *really* justify a horizontal menu in HTML+CSS?

Leer la respuesta aceptada cuidadosamente sin embargo, se aplican las siguientes salvedades:

Espacios en su texto LI necesitan ser reemplazados con &ensp; o que van a ser contados como espacios entre los elementos lógicos (  no lo hace trabajo)
Es necesario tener un espacio en blanco en el código HTML entre sus LIS (puede ser un gotcha si los está generando en un bucle de PHP.

Fuente

2013-05-01 11:01:39

Distribuir uniformemente enlaces a través de una navegación horizontal

Respuesta

Cuestiones relacionadas