CSS: corretto con menu orizzontale, con schede di larghezza variabile, usando ul

Question

Ho un menu orizzontale. Il markup è simile al seguente:

<ul class="menu"> 
    <li>Item 1</li> 
    <li>Longer Item 2</li> 
    <li>Item 3</li> 
</ul> 

I menu secondari ei dropdown dei suckerfish verranno in seguito.

Il ul deve estendersi alla larghezza della pagina (ad esempio 100% o 1000px).

Il lis deve variare in larghezza in base al loro contenuto.

Così il risultato sarà simile a questa:

-----------------100% of page------------ 
|--Item 1--|--Longer item 2--|--Item 3--| 

Ora è facile fare questo fissando una larghezza per ogni tag li, ma perché il menu sarà CMS guidato ho bisogno per consentire la larghezza di le schede per variare automaticamente. Con una tabella questo sarebbe banale, ma non riesco a pensare a un modo per farlo con un ul.

Answer 1

Ecco la mia soluzione jquery:

var actualWidth = 1000; 
var totalLIWidth = 0; 

// Calculate total width of list items 
var lis = $('ul li'); 

lis.each(function(){ 
    totalLIWidth += $(this).width(); 
}); 

// Work out how much padding we need 
var requiredPadding = Math.round(((actualWidth-totalLIWidth)/lis.length)/2); 

// To account for rounding errors, the error is going to be forced into the first tab. 
var roundingErrorFix = (requiredPadding*lis.length*2)+totalLIWidth-actualWidth; 

// Apply padding to list items 
lis.each(function(i) { 
    if(i==0) { 
     $(this).css('padding-left',requiredPadding-roundingErrorFix+'px') 
      .css('padding-right',requiredPadding-roundingErrorFix+'px'); 
    } 
    else { 
     $(this).css('padding-left',requiredPadding+'px') 
      .css('padding-right',requiredPadding+'px'); 
    } 
}); 

Answer 2

Se si sta tentando di definire l'ul (in modo che si estenda su tutta la pagina), la soluzione migliore è quella di avvolgerlo in un div e di dividere lo stile, quindi consentire all'ul di allungarsi fino a il suo contenuto lo porta

Answer 3

questo è un caso per

Pubblicato da: Tabella-Man

ul { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 
li { 
    display: table-cell; 
} 

Purtroppo, si dovrebbe abbandonare l'idea di supportare IE 6 e 7, ma il resto questo è il strada da percorrere (o swit ching alle tabelle HTML, che potrebbero o meno essere così lontane dal contenuto semantico del markup).

Answer 4

Se sei felice utilizzando JavaScript, jQuery potrebbe risolvere il problema nel modo seguente

var $menu, totalwidth; 

$menu = $('ul.menu'); 
totalwidth = ($menu.width()/100); 

$('ul.menu li').each(function(){ 
    this.css('width',String(Math.floor(this.width()/totalwidth))+'%'); 
}); 

$menu.css('width','100%'); 

Questo è testato, ma sembra giusto per me. Commenta se hai qualche domanda.

Answer 5

Suppongo che il suggerimento di boldewyn dovrebbe funzionare. Vorrei utilizzare questo approccio per i browser moderni e quindi utilizzare i commenti condizionali per alimentare quanto segue a ie6/7, in modo che il nav appaia ok, anche se non si estenderà la larghezza del 100%.

ul { 
    width: 100%; 
} 
li { 
    float:left; // or display:inline-block; 
}