Éléments en ligne avec Largeur

Question

Cette question semble être posée freqeuently sur Internet mais je ne peux toujours pas à trouver une solution.

I ai cette barre de navigation (Il commute entre les onglets à l'aide de jQuery) qui affiche en ligne. Je montre une image de fond sur ces questions et de les rendre plus je besoin définitif pour les rendre plus large et plus.

<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 seule façon que je peux sembler le faire est de les revenir en arrière pour bloquer les éléments. Ce qui est pas ce que je veux parce qu'ils affichent verticalement. J'ai donc essayé de mettre divs dans les points d'ancrage, donc je la taille peut-les. Cependant, ils semblent les revenir à bloquer des éléments aussi.

Im confus. Quelqu'un s'il vous plaît aider:)

Answer 1

Heureusement, vous vivez dans l'année 2009, où inline-block est largement adopté par les navigateurs: Cross inline-block du navigateur.

S'il est juste pour la hauteur (et tout le contenu des lis correspond chacun sur une ligne), vous souhaitez aller avec line-height: 123px, qui définit la hauteur d'une boîte en-ligne à 123px (par ligne, c'est) .

Ou, tout à fait commun, si la navigation est aligné à gauche, les float:

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

Cheers,

Answer 2

Parce qu'il n'a pas été 2009 quand j'ai dû résoudre ce :) Je suis la solution pour Firefox suivante classe css:

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

Ceci est ma classe inline-block générique que j'utiliser si nécessaire ...

Sinan.