Inline-Elemente mit Breite

Question

Diese Frage scheint häufig über das Internet gestellt zu werden, aber ich kann immer noch keine Lösung finden.

Ich habe diese Navigationsleiste (es wechselt zwischen Tabs mit jQuery), die inline anzeigt. Ich zeige ein Hintergrundbild auf diesen und um sie definitiver zu machen, muss ich sie breiter und höher machen.

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

Die einzige Möglichkeit, die ich tun kann, ist, sie zurück zu Blockelementen zurückzusetzen. Was ich nicht will, weil sie vertikal angezeigt werden. Also habe ich versucht, divs in die Anker zu setzen, damit ich sie bestimmen kann. Sie scheinen sie jedoch auch wieder in Blockelemente umzuwandeln.

Ich bin verwirrt. Jemand bitte helfen :)

Answer 1

Zum Glück leben Sie im Jahr 2009, wo Inline-Block ist weit verbreitet durch Browser übernommen: Cross browser inline-block.

Wenn es nur für die Höhe ist (und der gesamte Inhalt des li s passt jeweils auf eine Zeile), möchten Sie mit line-height: 123px gehen, die die Höhe einer Inline-Box auf 123px (pro Zeile, das ist).

Oder durchaus üblich, wenn die Navigation linksbündig ist, schweben sie:

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

Cheers,

Answer 2

Weil es nicht war 2009, als ich zum ersten Mal dieses Problem lösen musste :) Ich habe die Lösung für Firefox mit folgenden CSS-Klasse:

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

Das ist meine generische inline-block-Klasse, die ich bei Bedarf verwenden ...

Sinan.