✔ Links gleicher Breite zentrieren

[lisa5]

Hallo,
bei meinem horizontalen Menü sollen um die einzelnen Menüpunkte Kästchen angezeigt werden, die alle eine bestimmte Breite haben sollen. Das Menü soll in einem DIV zentriert sein. Ich habe im Forum unter http://www.tutorials.de/forum/css/3...ntalen-ausrichtung-der-listen-navigation.html gefunden, wie man das Menü zentrieren kann und unter http://www.tutorials.de/forum/css/295518-link-hintergrund-soll-gleich-lang-sein.html, dass man mit float: left; die gleiche Breite von Links erzielen kann. Ich habe dies so in meinem CSS-Code ergänzt:

#nav {
         display: block;
         background-color: #ffffff;
         text-align:center;
         }


#nav ul {
         background-color: #ffffff;
         padding: 0;
         margin: 0 auto;
         text-align: center;
         display: block;
}

#nav li  {
        display: inline;
        list-style: none;
        }

#nav ul a {
        width: 200px;
        float: left; 
        padding:10px;
        margin: 10px;
        text-align: center;
        text-decoration: none;
        background: #000fff;
        border: 1px solid #000000;
}

#nav ul#cat1 a:hover {
        border-color: #000000;
        background: #fff000;
}

Ohne float: left; werden die Links zentriert. Wenn ich float: left; ergänze, sind die Kästen gleich breit, aber nicht mehr zentriert.
Ich hoffe ihr könnt mir weiterhelfen. Vielen Dank und viele Grüße
Lisa

 

[goto;]

Hallo Lisa, versteh zwar nicht ganz was dein Problem ist. Könntest du dein Menü komplett zeigen? Damit es einfacher für uns ist.

 

[lisa5]

Hallo,
vielen Dank für die schnelle Antwort. Hier ist mein HTML-Teil. Ich möchte um die Wörter Startseite, Seite 1, ... Kästchen machen, die alle die gleiche Größe haben sollen. Insgesamt soll das Menü zentriert sein.

<div id="nav">
                         <ul>
                                 <li><a href="#">Startseite</a>
                                 </li>
                                 </li>
                                 <li><a href="#">Seite1</a>
                                 </li>
                                 </li>
                                 <li><a href="#">Seite2</a>
                                 </li>
                         </ul>
</div>

Viele Grüße
Lisa

 

[goto;]

Hi,

#nav li  {
        display: inline-block;
        list-style: none;
        }

sollte funktionieren, ich probier es mal eben.

 

[lisa5]

Vielen Dank für die schnelle Hilfe. Bei mir funktioniert es jetzt!