Enrico: Problem mit Ausrichtung von Listenelementen

Beitrag lesen

Hallo Gunnar,

danke für Deine Antwort.

.Sortiment { margin: -6px }

.Sortiment > li { margin: 6px }

  
Ok, damit sind jetzt schon mal jeweils zwei Listenelemente zueinander ausgerichtet und bündig.  
  
Gemäß der [Seite](http://files.peterkroener.de/test/box-sizing.html) und Deiner Antwort habe ich den css-Code wie folgt geändert:  
~~~css
ul.Sortiment  
{  
   list-style: none;  
   margin:     -6px;  
   width:      579px;  
}  
  
ul.Sortiment > li  
{  
   background:         #048;  
   color:              white;  
   float:              left;  
   margin:             6px;  
   text-align:         center;  
   vertical-align:     top;  
   width:              185px;  
}  
  
ul.Sortiment,  
ul.Sortiment > li  
{  
   box-sizing:         border-box;  
   -moz-box-sizing:    border-box;  
   -webkit-box-sizing: border-box;  
   -ms-box-sizing:     border-box;  
}

Haben alle li denn dieselbe Höhe?

Die Listenelemente werden Grafiken enthalten, die unterschiedlich groß sind.

Ich werde hier später über PHP die Grafiken skalieren (maximale Breite ergibt eine bestimmte Höhe) und über JavaScript die Listenelemente einer Zeile an die Höhe des höchsten Listenelement anpassen lassen.

Damit hätte ich Zeilen, die immer den gleichen Abstand haben und pro Zeile gleich hohe Listenelemente.

Könnte ein spannendes Unterfangen werden ;-)

Leider bekomme ich aber immer noch nicht jeweils drei Listenelemente in einer Zeile ausgerichtet.

Gruß,
Enrico