Listas horizontales sin flotar el LI

Bien, entonces estoy escribiendo CSS para una barra de navegación que usa una lista no ordenada para organizar el menú. El menú está centrado y no se desplaza hacia ningún lado, y el ancho de cualquier elemento li dado no puede predeterminarse (varía según la cantidad de texto en el elemento del menú), por lo que no puedo anotar el ancho del código.

Tengo el siguiente código CSS:

#nav ul { list-style: none; padding-bottom: 10px; height:16px; } #nav ul li { position: relative; display: inline-block; } #nav { position: relative; margin-top: -30px; text-align: center; font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif; font-size: 14px; } 

para el elemento nav, y esto funciona perfectamente para producir el menú de navegación centrado en Chrome 13. Pero cuando veo la página en IE8, la UL se vuelve vertical y no puedo hacer que se vuelva horizontal.

Hasta el momento, los resultados de búsqueda indican que necesito float:left; o float:right; los

  • s para hacer el menú horizontal. He intentado esto y hace que el menú sea horizontal en IE8, pero flotará hacia la izquierda o hacia la derecha. Necesito centrar los menús, y aparentemente no hay float:center; .

    El HTML correspondiente al menú es

      

    ¿Hay alguna manera sin necesidad de saber el ancho de los LI o tener que recurrir a JS para obtener el menú centrado Y horizontal?

    Ese código funciona bien en IE8, compruébalo tú mismo:

    http://jsfiddle.net/bEEEb/

    Probablemente no funcione para usted porque no está en modo IE8 (el modo IE7 o el modo Quirks son las alternativas).

    Agregue un tipo de documento como la primera línea si no tiene uno:

     < !DOCTYPE html> 

    Si necesita que esto también funcione en IE7 (en el que inline-block en inline-block solo funciona con elementos naturalmente en línea por defecto), entonces reemplace la display: inline-block con:

     display: inline-block; *display: inline; zoom: 1; 

    … por supuesto, si puedes salirte con la display: inline , esa es la solución más simple, pero igual deberías averiguar por qué tu página no se muestra en el Modo IE8.

  • solo usa lo siguiente en tu li:

     display: inline; 

    Debería obtener los resultados deseados.

    IE no es compatible con la display: inline-block , use display: inline lugar li elemento.