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/

Answer 1

[Steffile]

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.

Comments

[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/

[Steffile]

@Croghs

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;}

[Croghs]

@Steffile

Dankeschön! Jetzt funktioniert es!

[Steffile]

@Croghs

Viel Erfolg :)

Answer 2

[Ichmagdichsarah]

Mit width sollte es doch gehen, oder? ^^

Comments

[Ichmagdichsarah]

Also, ich kann mir die Seite gerade leider nicht anschauen, da ich am handy bin. Hast du position absolute oder fixed?

[Croghs]

@Ichmagdichsarah

keins von beiden, funktioniert aber bei beiden nicht.

[Ichmagdichsarah]

Mache die einzelnen Listenpunkte breiter. Mit padding.

[Croghs]

@Ichmagdichsarah

Dann kommt es aber immer noch nicht zum zeilenumbruch sondern nur zu einem Wirrwar. Und wenn ich das padding auf 12px stelle, habe ich trotzdem alle 10 Elemente in einer Zeile.

[Croghs]

Wie meinst du das? Mein container ist 1140px breit, aber die Liste geht noch darüber hinaus... http://jsfiddle.net/42es4vvq/