Elementos en línea con ancho

Esta pregunta parece hacerse con frecuencia a través de Internet, pero todavía no puedo encontrar una solución.

Tengo esta barra de navegación (Cambia entre pestañas usando jQuery) que se muestra en línea. Estoy mostrando una imagen de fondo en estos y para hacerlos más definitivos, necesito ampliarlos y aumentarlos.

<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 forma en que puedo hacer esto es revertirlos a elementos de bloque. Que no es lo que quiero porque se muestran verticalmente. Así que intenté poner divs en los anclajes para poder medirlos. Sin embargo, parecen cambiarlos de nuevo para bloquear elementos también.

Estoy confundido. Alguien por favor ayuda :)

Respuestas a la pregunta(2)

Su respuesta a la pregunta