Barra de menú CSS para abarcar el ancho de la página

Me gustaría el menú principal de esta página. http://www2.gardencomedyclub.co.uk para utilizar todo el ancho de la página. He intentado usar margin: 0 auto; en diferentes lugares en el #menu CSS, pero sigue estando justificado a la izquierda. Me gustaría el margen entre el li elementos para expandir para llenar todo el ancho de la #mainmenu div. ¡Gracias por cualquier ayuda!

preguntado el 16 de mayo de 11 a las 19:05

Parece que su diseño es bastante estático y los elementos del menú parecen haber llenado todo el espacio disponible. ¿Por qué no definir anchos estáticos para algunos elementos del menú para aprovechar el espacio restante? -

Veo. Entonces, ¿su dicho define anchos fijos para los elementos del menú o agrega un poco de relleno / márgenes definidos para desarrollar el espacio? -

Estoy de acuerdo con Brandon. El ancho de su menú no cambiará, así que simplemente cambie el margen de #menu a a margin: 0 6px;. Los botones ahora se ajustan bien y pueden respirar un poco. -

De hecho, lo tuve hace un tiempo y todo parecía encajar bien cuando probé en Chrome, Safari y todos mis navegadores móviles. Sin embargo, cuando probé en Firefox, el About el artículo fue empujado a una nueva línea ... -

2 Respuestas

Desde su #menu li elimine float: left y en su lugar use display: inline-block. Sin embargo, esto empujará el último li en una nueva fila. Para solucionar eso, tendrás que cambiar el margen y el relleno por "a" como margen: 0 1px y relleno: 0 1px. Esto funciona en IE9, FF4.01, GG11, AF5.0.5 y Opera 11.

contestado el 16 de mayo de 11 a las 23:05

Muchas gracias. ¡Estaba seguro de que habría una forma "correcta" de hacerlo! - Sonoman

Ayudas margin:0 auto; para trabajar, necesita establecer un width.

Utilización de width:730px; on #menu y debería funcionar.

contestado el 16 de mayo de 11 a las 23:05

Lo hace por mi. Revisé en Chrome. El tuyo también funciona. Mejor, si quiere el mismo espacio entre los elementos. El mío solo centra la lista completa. - Jason Gennaro

comprobar de nuevo en IE9 y FF4.01 - Jawad

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.