Elementi in linea con la larghezza

Question

Questa domanda sembra essere chiesto freqeuently su internet, ma non riesco ancora a trovare una soluzione.

ho questa barra di navigazione (Si passa tra le schede usando jQuery) che visualizza in linea. Sto mostrando un'immagine di sfondo su questi e per renderli più definitiva ho bisogno di fare loro più larga e più alta.

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

L'unico modo che riesco a fare questo è un ritorno indietro per bloccare gli elementi. Che non è quello che voglio perché visualizzano in verticale. Così ho provato a mettere div nei tasselli in modo da posso li taglia in più. Tuttavia, essi sembrano cambiare di nuovo a bloccare gli elementi troppo.

Im confuso. Qualcuno si prega di aiuto:)

Answer 1

Per fortuna si vive nel 2009, in cui inline-block è ampiamente adottato attraverso i browser: cross browser inline-block .

Se è solo per l'altezza (e tutto il contenuto dei lis si inserisce ciascuna su una riga), vuoi andare con line-height: 123px, che imposta l'altezza di un riquadrato in riga a 123px (per linea, che è) .

In alternativa, abbastanza comune, se la navigazione è allineato a sinistra, li float:

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

Saluti,

Answer 2

Perché non 2009 è stato quando ho dovuto prima di risolvere questo :) ho ottenuto la soluzione per Firefox con i seguenti classe CSS:

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

Questa è la mia classe generica inline-block che uso se necessario ...

Sinan.