Frage von Croghs, 61

li - Liste über 2 Zeilen?

Hallo, ist es in HTML möglich, eine li-liste über zwei Zeilen zu erstrecken? Ich meine dass man zum Beispiel die ersten 5 Glieder einer Liste in die erste Zeile und die zweiten 5 Glieder in die 2. Zeile packt. In etwa so (siehe Anhang). Wäre super wenn mir jemand sagen könnte wie man das machen kann. (Ich meine dabei nicht mit ul zu arbeiten, da die Website auch responsive nutzbar sein soll) Danke und MfG Croghs

Quellcode: http://jsfiddle.net/42es4vvq/

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Steffile, 61

Natuerlich kannst du auch responsiv mit ul li arbeiten. Tabellen sind die, die problematisch sind.

Du kannst die < li > nach links floaten und Zeilenumbruch mit dem pseudo element nth-child erzwingen.

Z.B. wenn du nach jedem 5ten Element eine neue Reihe anfangen willst:

li {width:200px; float:left;}
li:nth-child(5n+1) {clear:left;}

Je nach Fall koenntest du auch jedes < li > mit 20% Breite angeben, und Media Queries einbauen, sodass die Breite auf kleinen Bildschirmen z.B. 50% ist, sodass sich die Links in Zweiergruppen anordnen.

Kommentar von Croghs ,

Ja, so in etwa meinte ich das, allerdings sieht es bei mir jetzt so aus:

https://gyazo.com/ba83387f4c1b4e80f9b5d81a53d386d3

updated Link: http://jsfiddle.net/6f4Lugg2/

Kommentar von Steffile ,

Das ist, weil .cell border hat, das tut nochmal 2px zu jedem 20% Breite dazu, versteht du?

Du kannst mit calc() arbeiten, das funktioniert allerdings auf alten Browsern nicht:

.cell { 
text-align: center;    
border: 1px solid #fff;    
border-bottom: none;    
height: 199.5px !important;    
display: table-cell;    
width: calc(20% - 2px);}

Oder eigentlich besser mit boxshadow:

.cell {
text-align: center;    
/*border: 1px solid #fff; */    
border-bottom: none;    
height: 199.5px !important;    
display: table-cell;    
width: 20%;    
-webkit-box-shadow: 0 0 0 1px #FFFFFF;    
box-shadow: 0 0 0 1px #FFFFFF;}
Kommentar von Croghs ,

Dankeschön! Jetzt funktioniert es!

Kommentar von Steffile ,

Viel Erfolg :)

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten