Esta pergunta parece ser feita frequentemente pela internet, mas ainda não consigo encontrar uma solução.

Eu tenho essa barra de navegação (Ele alterna entre as guias usando jQuery), que exibe inline. Estou mostrando uma imagem de fundo e, para torná-las mais definitivas, preciso torná-las cada vez mais amplas.

<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>

A única maneira que eu posso fazer isso é revertendo-os de volta aos elementos de bloco. Qual não é o que eu quero porque eles são exibidos verticalmente. Então, tentei colocar divs nas âncoras para poder dimensioná-las. No entanto, eles parecem mudá-los de volta para os elementos de bloco também.

Estou confuso. Alguém por favor ajude :)