li - Liste über 2 Zeilen?

...komplette Frage anzeigen Liste über 2 Zeilen - (Internet, html, CSS)

1 Antwort

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.

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/

0
@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;}
1

Was möchtest Du wissen?