Problem mit display: inline

Problem mit display: inline

Hi,
ich kriege ein Menu einfach nicht richtig hin...
mein Code sieht in etwa folgendermaßen aus:

...
<td style="height: 20px">
<div style="width: 500px; height: 20px; ...">
<div style="background-color: #EEEEF8; height: 20px; width: 100px; display: inline;">
link1
</div>
<div style="background-color: transparent; height: 20px; width: 100px; display: inline;">
link2
</div>
...
</div>
</td>
...

in dem td wird also eine leiste angezeigt (das erste div), auf dem die menupunkte sind. der erste menupunkt ist selektiert, die restlichen nicht. beim

selektierten menupunkt soll der hintergrund farblich hinterlegt sein. das problem ist nun, dass ich es einfach nicht hinkriege, dass die höhe der

selektierfarbe 20px wird. ich habe schon rumexperimentiert und rausgefunden, dass es an display: inline liegt. allerdings brauche ich das unbedingt, da das

menu horizontal ist und die menupunkte somit nebeneinander angezeigt werden müssen.

habt ihr irgendwelche vorschläge?

danke, habe deinen rat mit der liste befolgt und es funktioniert (fast) problemlos.

eine frage bleibt mir aber noch:

wenn ich zwei menupunkte direkt nebeneinander haben möchte, müsste ich das so schreiben

<li class="menu">blabloblu<li class="menu">...

das ist relativ unübersichtlich und ich würde die [*] gerne im quellcode untereinander haben. dann ist aber immer ein leerraum dazwischen. kann ich das irgendwie unterbinden?

ok, war schlecht beschrieben...die menupunkte sind schon nebeneinander, das ist korrekt. aber die menupunkte sollen so nebeneinander sein, dass _keine_ lücke dazwischen ist.

d.h. wenn ich über einen button gehe und der rollovereffekt angezeigt wird, soll das rolloverrechteck so breit bis zum nächsten button sein. das funktioniert nur, wenn zwischen den [*] kein leerzeichen ist, aber das ist meiner ansicht nach total unübersichtlich. gibts da überhaupt eine möglichkeit in html?

der zeilenumbruch ist das problem - durch den zeilenumbruch entsteht die lücke