duda con menú horizontal float:left; display:inline;

Buenas...

Hasta ahora he visto que hay 2 opciones para hacer menús en horizontal, con float y con display.

¿Cuál es la mejor opción? ¿Hay alguna que sea compatible con más navegadores?

Con el menu display:inline; se queda un espacio entre las celdas, y he probado que si aplico float:left; se quita. ¿Es la mejor opción, o se puede hacer de otra forma?

Código CSS :

   nav{margin:11px;}
   
   nav.menu1 ul{
      list-style:none;   /*Quita el bullet de la lista.*/
   }
   nav.menu1 li{
      float:left;   /*Distribuye los elementos en horizontal*/
   }
   nav.menu1 li a{   /*Aquí aplicamos el diseño del menu*/
      text-decoration:none;
      padding:3px 10px;
      border:solid #000;
      border-width:1px 1px 1px 0;
   }

   #primero{border-left:1px solid #000;}
   
   nav.menu2 ul{
      list-style:none;   /*Quita el bullet de la lista.*/
   }
   nav.menu2 li{
      display:inline;   /*Distribuye los elementos en horizontal*/
   }
   nav.menu2 li a{   /*Aquí aplicamos el diseño del menu*/
      text-decoration:none;
      padding:3px 10px;
      border:solid #000;
      border-width:1px 1px 1px 0;
   }   

Código HTML :

      <nav class="menu1">
         <ul>
            <li><a href="" id="primero">home</a></li>
            <li><a href="">estado</a></li>
            <li><a href="">contacto</a></li>
         </ul>
      </nav>
      <br />
      <nav class="menu2">
         <ul>
            <li><a href="" id="primero">home</a></li>
            <li><a href="">estado</a></li>
            <li><a href="">contacto</a></li>
         </ul>
      </nav>

walden:

La que mejor se adapte a tus necesidades.


Ambas son igualmente compatibles con todos los navegadores desde hace unos 12 años... más o menos.


Si usas float, debes ponerle un margin a los elementos para espaciarlos entre sí. Si usas float no puedes centrar los elementos en su contenedor, pero si usas inline no puedes controlar la altura que tendrá cada elemento.

Gracias DriverOp, por lo que veo hay que elegir el que mejor se adapte al diseño de la web. Es que el tema de los hacks y los filters me tiene loco…

No me había fijado en que no se puede centrar el menú cuando se usa float. Pero es que si no pongo float en el menú display:inline se crea un espacio entre las celdas. Para juntarlas tengo que poner un margin negativo. No lo entiendo.

Si usas display: inline-block los elementos se acomodarán como si fueran de linea (horizontalmente) pero conservarán las propiedades de un elemento de bloque, así que podrás acomodar sus dimensiones y el margin y padding con total libertad, en mi opinión es la mejor opción.

Si float tiene cualquier valor que no sea "none" automáticamente el display pasa a "block", no importa que le pongas específicamente "inline" luego. Un elemento no puede ser inline y flotar al mismo tiempo.

te recomiendo diplay: inline-block;

Gracias, me apunto diplay: inline-block;