(CSS) Probleme mit horizontaler Navigation

[Tiamat]

Hallo ich hab hier n völlig unspektakulären Aufbau :

hier der HTML Teil :

<div id="centeredArea">
...
<div id="categories">
<ul id="catbar">
<li class="orange"><a href="#"></a></li>
<li class="green"><a href="#"></a></li>
.....
</ul>
</div>
</div>




#categories {
text-align:center;
}

#categories a:link {
display:block;

}

.orange a:link {
background-image:url("Navi/u2.png");
width:134px;
height:26px;
}

.orange a:hover {
background-image:url("Navi/u2_O.png");
width:134px;
height:26px;

}

....

ul#catbar li {
margin-right:-10px;
padding:0px;
display:inline;
}

In ul#catbar li habe ich zunächst natürlich display:inline versucht, doch dies hat dazu geführt, dass die Navigation komplett verschwunden ist.
Nur display:block hat funktioniert, allerdings natürlich mit Zeilenumbruch. Ich möchte einfach nur ne Liste, bei der alle Listenelemente inline ohne Abstand dargestellt werden.
HTML und CSS Validator sagen alles in Ordnung, klar die prüfen ja auch nur die syntaktischen Fehler.

Hat jemand ne Ahnung, was hier display:inline verhindert oder wie es erzwingen kann?

Gruß
Tiamat

[Tommes]

float: left; sollte helfen.

[Tiamat]

Danke, das funktioniert auch :)

Gibt´s dafür irgendwo ne Erklärung?

[darph]

Danke, das funktioniert auch :)

Gibt´s dafür irgendwo ne Erklärung?
Ohne angegebener Breite ist ein Block immer so breit, wie's eben gerade geht.

Bei float soll ja gerade eben noch was daneben hin passen, so daß die Breite dann implizit so schmal gesetzt wird, daß da eben noch Inhalt neben hin paßt.