Enrico: Problem mit Ausrichtung von Listenelementen

Beitrag lesen

SELF-Forum

Problem mit Ausrichtung von Listenelementen

Enrico
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte eine Liste mit beliebiger Anzahl an Listenelementen so formatieren, dass immer drei Elemente nebeneinander dargestellt werden und ab jedem vierten Element eine neue "Zeile" angefangen wird.

Hierbei habe ich folgende Vorgaben:

  • Gesamte Breite der Liste: 579px
  • Abstand zwischen jedem zweiten und dritten Element: 12px;
  • Jedes dritte Element hat rechts keinen Abstand, damit es sich am rechten Rand der Liste anordnet
  • Breite jeden Listenelements: 185px
  • Ab dem vierten Element hat jedes Element einen oberen Abstand von 12px

Wenn ich nun eine Reihe zusammen zähle, dann komme ich genau auf 579px (185px + 12px + 185px + 12px + 185px), so dass mein Vorhaben, immer drei Listenelemente nebeneinander darzustellen, erfüllt wären.

Hier der css-Code ("margin" und "padding" habe ich vorher bereits global auf jeweils "0px" gesetzt):

  
ul.Sortiment  
{  
   list-style: none;  
   width:      579px !important;  
}  
  
ul.Sortiment li  
{  
   background:     #048;  
   color:          white;  
   float:          left;  
   margin:         12px 12px 0px 0px;  
   text-align:     center;  
   vertical-align: top;  
   width:          185px !important;  
}  
  
ul.Sortiment li:first-child,  
ul.Sortiment li:first-child + li,  
ul.Sortiment li:first-child + li + li  
{  
   margin-top: 0px;  
}  
  
ul.Sortiment li:nth-child (3n)  
{  
   margin-right: 0px;  
}

Der html-Code:

  
<body>  
   <ul class="Sortiment">  
      <li>Artikel 1</li>  
      <li>Artikel 2</li>  
      <li>Artikel 3</li>  
      <li>Artikel 4</li>  
      <li>Artikel 5</li>  
   </ul>  
</body>

Das gewünschte Ergebnis wäre:

+-----------+ +-----------+ +-----------+
| Artikel 1 | | Artikel 2 | | Artikel 3 |
+-----------+ +-----------+ +-----------+

+-----------+ +-----------+
| Artikel 4 | | Artikel 5 |
+-----------+ +-----------+

Die tatsächliche Ausgabe im Browser ist aber:

+-----------+ +-----------+
| Artikel 1 | | Artikel 2 |
+-----------+ +-----------+
+-----------+
| Artikel 3 |
+-----------+
              +-----------+
              | Artikel 4 |
              +-----------+
+-----------+
| Artikel 5 |
+-----------+

Was habe ich falsch gemacht?

Vielen Dank für eure Hilfe und Gruß,
Enrico

Beitrag melden
–
Informationen zu den Bewertungsregeln