CSS: Abstand zwischen <li></li> automatisch an gesamtbreite anpassen

...komplette Frage anzeigen

1 Antwort

Feste Breite gibt man mit "width" an. Es können z.B. Pixel oder Prozent als Maßeinheit genommen werden.

Hier wird einfach und übersichtlich erklärt wie man zu einem Menü kommt. Im letzten Schritt wird auch gezeigt wie man das ganze horizontal ausrichtet (mit float). http://www.gipspferd.de/css/anleitung/a5/a5.php

In dem Beispiel werden für die Liste padding und margin auf 0 gesetzt. Viele Webdesigner setzen gleich alles prinzipiell auf null. Definieren also für alle (*) 0

greenvbuser 19.10.2012, 21:15

Danke schonmal für die Antwort. Das ist aber noch nicht ganz, was ich wollte.

Meine Seite ist in der Mitte des Bildschirms (margin-left: auto; margin-right: auto;) und 800px breit.

Die linke Kante des 1. Menüpunktes soll dabei auch ganz links, am Anfang der 800px, anliegen, die rechte Kante des 4., also letzten Menüpunktes soll rechts außen, also am Ende der 800px liegen. Die Menüpunkte sollen aber z.B. nur 150px breit sein. Der Abstand ZWISCHEN den

s soll hierbei automatisch so gewählt werden, dass das diese gesamtbreite von 800px annimmt und die oben genannten Kanten an den gewollten Stellen liegen. Geht das?
0
greenvbuser 19.10.2012, 21:37
@greenvbuser

Ich habe es folgendermaßen versucht (im übrigen habe ich mittlerweile 6 menüeinträge...)

Ich will IMMER 20px abstand zwischen den Einträgen haben. 800px habe ich zur verfügung.

Bei 6 Einträgen habe ich 5 Abstände zu Berücksichtigen, also:

5x20px = 100px - Richtig!? Für die Einträge also 800 - 100 = 700 -> 700 stehen noch frei:

700/6 = 116 - Richtig!?

Also: 6x116 + 5+20 = 800!!!

ich denke also: Ich mache 5 LIs mit ID="a" und schreibe da rein margin-right: 20px; width: 116px; und 1 LI mit ID="b" und schreibe margin-right: 0px; width: 116px;

(in Kurzform. Ich habe noch bg-color und so drin. aber im groben.)

RECHTS außen brauche ich ja keinen Abstaand, deshalb margin-right 0px!

Aber das letzte LI wird in eine neue Zeile verschoben obwohl von der rechnung her ALLES stimmt. WARUM? Kann CSS nicht rechnen oderwas? Ich raffs einfach nicht!

0
Gegengift 20.10.2012, 21:39
@greenvbuser

WARUM? Kann CSS nicht rechnen oderwas? Ich raffs einfach nicht!

Stichwort Boxmodell ..

Kopier mal den gesamten Quellcode rein dann kann ich dir genau sagen wo die Pixel zuviel sind. Reinkopieren, alles markieren und auf CODE Button oben drücken.

ch denke also: Ich mache 5 LIs mit ID="a"

id s sind einmalig - nimm class

0

Was möchtest Du wissen?