Formatiske problemer med CSS

[appelsin]

Jeg holder på å modifisere en template nå, men den vannrette hovedmenyen blir litt rotete siden noen ord er lengre enn andre. Noen som har en god løsning på hvordan man kan få samme avstand mellom ordene? Løsningen som har blitt brukt til nå er å tildele hvert ord i menyen like store bokser på 120 px som dere ser på width nedenfor. Noen som har noen enkle tips?

CSS-filen

#menu {
height: 47px;
width: 900px;
padding-left: 20px;
margin: 0 auto;
background:url('images/menubg.jpg') center;
}

#menu ul {
margin: -3px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
float: left;
width: 120px;
height: 37px;
padding-top: -10px;
text-decoration: none;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #013696;

 

[Nutz]

Kanskje du kan hente litt inspirasjon her:
CSS UL LI - Horizontal CSS Menu

 

[TorsteinO]

Noe sånt som dette burde vel gjøre susen, bare å droppe den faste bredden, og heller sette f.ex. 20px margin på høyre og venstre side

#menu a {
float: left;
width: auto;
height: 37px;
padding-top: -10px;
text-decoration: none;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #013696;
margin: 0 20px;

 

[appelsin]

Takk Torstein. Dette fungerte enkelt og greit.