Elementos em linha com larguras

Question

Esta questão parece ser perguntado freqeuently através da internet, mas eu ainda não consigo encontrar uma solução.

Eu tenho essa barra de navegação (Ele alterna entre as abas usando jQuery) que exibe inline. Estou mostrando uma imagem de fundo sobre estes e para torná-los Eu preciso de mais definitivo para torná-los mais amplo e mais elevado.

<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 consigo fazer isso é através revertendo-los de volta para elementos de bloco. O que não é o que eu quero porque eles exibir verticalmente. Então, eu tentei colocar divs nas âncoras para que eu possa tamanho los. No entanto, eles parecem mudar de volta para elementos de bloco também.

Im confuso. Alguém ajuda por favor:)

Answer 1

Felizmente você vive no ano de 2009, onde inline-block é amplamente adotado através de navegadores: Cross navegador inline-block .

Se for apenas para a altura (e todo o conteúdo dos lis se encaixa cada um em uma linha), você gostaria de ir com line-height: 123px, que define a altura de uma caixa de inline para 123px (por linha, que é) .

Ou, bastante comum, se a navegação está alinhado à esquerda, flutuar-los:

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

Cheers,

Answer 2

Porque não 2009 foi quando eu primeiro tinha que resolver isso :) eu tenho a solução para o firefox com seguinte classe css:

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

Esta é minha classe inline-block genérico que eu uso quando necessário ...

Sinan.