Elementos en línea con un ancho

Question

Esta cuestión parece ser preguntado freqeuently en internet, pero todavía no puede encontrar una solución.

Tengo esta barra de navegación (Conmuta entre las pestañas utilizando jQuery) que muestra en línea. Estoy mostrando una imagen de fondo en estos y hacerlos más definitivo que necesito para hacerlos más ancho y más alto.

<div id="tabs">
<ul id="tabs-nav-cont">
    <li class="tabs-navs"><a href="#tabs-1">Nav 1</div></a></li>
    <li class="tabs-navs"><a href="#tabs-2">Nav 2</div></a></li>
    <li class="tabs-navs"><a href="#tabs-3">Nav 3</div></a></li>
    <li class="tabs-navs"><a href="#tabs-4">Nav 4</a></li>
</ul>
</div>

La única manera de que pueda parecer que hacerlo es volviendo de nuevo a bloquear elementos. Que no es lo que quiero porque muestran verticalmente. Así que he intentado poner divs en los anclajes, así que puede tamaño hacia arriba. Sin embargo parece que cambiarlos de nuevo al bloque elementos también.

Im confundido. Alguien por favor ayuda:)

Answer 1

Por suerte se vive en el año 2009, en donde inline-block es ampliamente adoptado a través de navegadores: Cruz navegador inline-block .

Si es sólo por la altura (y todo el contenido de los lis se adapte a cada uno en una línea), desea ir con line-height: 123px, que establece la altura de una caja de línea de 123px (por línea, que es) .

O, bastante común, si la navegación está alineado a la izquierda, flotar:

#nav li {
  display: block;
  float: left;
}

Saludos,

Answer 2

Debido a que no fue 2009 lo primero, cuando tenía que resolver este :) tengo la solución para Firefox con la siguiente clase CSS:

.ib { display: -moz-inline-block; display: inline-block;}

Esta es mi clase genérica inline-block que yo uso cuando sea necesario ...

Sinan.