CSS: arreglado con menú horizontal, con pestañas de ancho variable, usando ul

Question

Tengo un menú horizontal. El marcado se ve así:

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

submenús y menús desplegables Suckerfish vendrán después.

El ul necesita abarcar el ancho de la página (por ejemplo, 100% o 1000 px).

La lis debe variar en anchura en función de su contenido.

Así, el resultado sería el siguiente aspecto:

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

Ahora bien, es fácil de hacer esto mediante la fijación de un ancho para cada etiqueta li, sino porque el menú se CMS impulsado Me es posible el ancho de las pestañas para variar automáticamente. Con una tabla esto sería trivial, pero no puedo pensar en una manera de hacerlo con un ul.

Answer 1

aquí está mi solución 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

Si está tratando de darle estilo al ul (de modo que se extienda por toda la página), lo mejor es envolverlo en un div, y darle estilo al div, y luego permitir que el ul se estire tan lejos como su contenido lleva

Answer 3

este es un caso para

display: table-Man

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

Desafortunadamente, usted debe abandonar la idea de apoyar IE 6 y 7, pero otra cosa es el camino a seguir (o cambiar a tablas HTML, que pueden estar o no muy alejadas del contenido semántico del marcado).

Answer 4

Si usted es feliz usando JavaScript, jQuery podría resolver el problema de la siguiente manera

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%'); 

eso no está probado, pero se ve bien para mí. Comente si tiene alguna pregunta.

Answer 5

Creo que la sugerencia de boldewyn debería funcionar. Utilizaría este enfoque para navegadores modernos y luego usaría comentarios condicionales para pasar lo siguiente a ie6/7, para que el navegador se vea bien allí, aunque no abarque el ancho del 100%.

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