Distribuire uniformemente i collegamenti su una navigazione orizzontale

Sto cercando di trovare un metodo semplice per far sì che tutti i link si distribuiscano uniformemente sulla navigazione orizzontale. Questo sarebbe molto facile se fosse una quantità fissa di link, ma saranno dinamici.Distribuire uniformemente i collegamenti su una navigazione orizzontale

Quindi potrebbe essere 5 o 10 collegamenti, nessuno lo sa. Nonostante la quantità di link che mi piacerebbe che si diffondessero in modo uniforme attraverso la navigazione senza usando un tavolo.

Il motivo per cui non voglio utilizzare una tabella è perché interromperà la struttura UL LI che è (apparentemente) considerata la strada da percorrere quando si costruisce una navigazione (SEO).

Ecco un jsFiddle spiegarlo più in profondità: http://jsfiddle.net/pkK8C/19/

Cercando il metodo più luce.

Grazie in anticipo.

fonte

2012-02-20 Rick Kuipers

in modo da poter inserire tanti elementi di navigazione entro 400px o la larghezza non è importante? Posso dire che potresti aver bisogno di usare Javascript per riuscirci. –

@JaspreetChahal Sì, ho pensato che ... non saprei davvero come farlo, c'è un modo per calcolare la larghezza di una parola in js?O dovremmo simularlo in un div invisibile e prendere la larghezza di quel div ... –

Bene per me avrai bisogno di avere alcuni limiti duri sull'elemento esterno e quindi renderizzare i tuoi elementi Interni. Ecco un buon post che puoi leggere su come ottenere le larghezze di testo http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript in js. ecco qualcosa che ho fatto in jsfiddle http://jsfiddle.net/pkK8C/27/ ma che non accontenterà se i link superano determinati limiti –

Usa display: table per UL e display: table-cell per LI. E display-table.htc per IE6/7 se contano.

fonte

2012-02-20 23:44:41

Perché funzioni, credo che la larghezza dell'UL debba essere impostata al 100% (cioè larghezza: 100%) –

@ pwee167 Questo è abbastanza ovvio. ;-) –

Trovo che usare l'attributo CSS 'max-width' per gli elementi 'LI' di primo livello può essere utile se la prima colonna contiene solo brevi testi e gli altri hanno testi di link più lunghi. I browser moderni sembrano funzionare. – sampoh

Vecchio browser potrebbe essere un mal di testa, ma funziona per quelli nuovi:

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 */ 
}

fonte

2012-02-20 23:43:57

La compatibilità mi dava fastidio ma da quando Marat Tanalin mi ha indirizzato a display-table.htc accetterò la sua risposta. +1 da parte mia per l'esempio di codice. –

Ecco una soluzione jQuery che distribuisce uniformemente i collegamenti al 100% dell'elemento di confinamento. I collegamenti all'estrema sinistra e all'estrema destra sono eseguiti fino alle estremità.

jQuery:

pad_menu() aumenta imbottitura fino all'ultimo li galleggia sotto della prima poi diminuisce imbottitura per uno, quindi l'ultima li torna sulla stessa linea. var I stops loop infinito (che non dovrebbe mai accadere comunque).

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

fonte

2012-07-13 10:26:55

C'è una soluzione più bello qui, dove si utilizza text-align:justify:

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

Leggi la risposta accettata con attenzione, però, valgono le seguenti avvertenze:

spazi nel testo LI devono essere sostituiti con &ensp; o faranno essere considerati come spazi tra gli oggetti logici (  non lo fa lavoro)
È necessario avere spazi bianchi nel codice HTML tra LIS (può essere un getcha se li stai generando in un ciclo PHP.

fonte

2013-05-01 11:01:39

Distribuire uniformemente i collegamenti su una navigazione orizzontale

risposta

Problemi correlati