✔ Wie diese Struktur als Liste umsetzen?

T

tequila slammer

Erfahrenes Mitglied
Hallo Forum,

ich möchte folgendes mit mit einer Liste erreichen um ein Tabellenkonstrukt weniger im Code zu haben.

Link 1 Link 2 Link 3 Link 4
Link 5 Link 6 Link 7 Link 8
Link 9 Link 10

Es soll also nach jedem vierten Element umgebrochen werden. Die Liste mit css horizontal auszurichten ist nicht das Problem, sonder de Umbruch. Habt ihr eine Idee?
 
Hi,

das ist in diesem Fall reine Mathematik :-)

CSS: 
li {
float:left; /* Element wird rechtsseitig umflossen */
width:25%; /* 100% / 4 = 25% */
}

Mit diesen beiden Regeln bricht jeweils das fünfte <li>-Element in die nächste Zeile um.

mfg Maik
 
Kannst mir erklären wie das mit dem Dreizeiler gehen soll? Besonder width:25%? Ich probier das gleich mal. das glaube ich ja so nicht ;-)

//edit: Perfekt, danke für die schnelle und promote Hilfe
 
Zuletzt bearbeitet:
Dann überzeug dich selbst davon - du bist hier schließlich nicht der Erste, der den Wunsch äußert, dass nach "X"-Elementen ein Zeilenumbruch erfolgen soll ;-)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-03-06" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
div#box {
width:800px;
margin:auto;
border:1px solid #ccc;
overflow:hidden;
}
div#box ul {
list-style:none;
margin:0;
padding:0;
}
div#box ul li {
float:left; /*Element wird rechtsseitig umflossen */
width:25%; /* 100% / 4 = 25% */
}
/* ]]> */
</style>

</head>
<body>

<div id="box">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
        <li><a href="#">Link 10</a></li>
    </ul>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück