Liste mehrspaltig
Roland Bär
- css
0 MudGuard0 Roland Bär0 MudGuard
0 Vinzenz0 Sebastian Becker
Hallo zusammen,
ich habe eine Liste von Links:
<ul>
<li><a href="....">link1</a></li>
<li><a href="....">link2</a></li>
<li><a href="....">link3</a></li>
<li><a href="....">link4</a></li>
<li><a href="....">link5</a></li>
<li><a href="....">link6</a></li>
</ul>
Diese liste möchte ich wie folgt darstellen:
link1 link2 link3
link4 link5 link6
Dabei möchte ich keine Tabellen verwenden. Meine Idee war nun, jedem li Element einen class Name zu geben, der die Spalte repräsentiert:
<ul>
<li class="col1"><a href="....">link1</a></li>
<li class="col2"><a href="....">link2</a></li>
<li class="col3"><a href="....">link3</a></li>
<li class="col1"><a href="....">link4</a></li>
<li class="col2"><a href="....">link5</a></li>
<li class="col3"><a href="....">link6</a></li>
</ul>
Mittels display:inline und Positionsangaben für die verschiedenen Spalten konnte ich zwar die Elemente in verschiedene Spalten bringen, aber es sind alle auf der gleichen Höhe, das heisst sie überdecken sich.
Hat jemand eine Idee, wie ich dieses Problem lösen kann?
Viele Grüsse
Roland
Hi,
Diese liste möchte ich wie folgt darstellen:
link1 link2 link3
link4 link5 link6
Dabei möchte ich keine Tabellen verwenden. Meine Idee war nun, jedem li Element einen class Name zu geben, der die Spalte repräsentiert:
Urgs. Gib der Liste die dreifache Breite, die ein li haben soll (plus ggf. noch ein paar Pixel für borders, margins ...).
Gib dem li die einfache Breite und laß die li floaten.
cu,
Andreas
Urgs. Gib der Liste die dreifache Breite, die ein li haben soll (plus ggf. noch ein paar Pixel für borders, margins ...).
Gib dem li die einfache Breite und laß die li floaten.cu,
Andreas
Vielen Dank für eure Hilfe!
Meine Lösung sieht nun folgendermassen aus:
<ul class="columned">
<li>
<a href="...">link1</a>
</li>
<li>
<a href="...">link2</a>
</li>
<li>
<a href="...">link3</a>
</li>
<li>
<a href="...">link4</a>
</li>
<li>
<a href="...">link5</a>
</li>
<li>
<a href="...">link6</a>
</li>
</ul>
... und das stylesheet:
ul.columned
{
display:inline;
width:612px;
}
ul.columned li
{
display:inline;
float:left;
width:200px;
margin:2px;
}
Viele Grüsse
Roland
Hi,
ul.columned
{
display:inline;
width:612px;
}
Daß width keine Auswirkung haben darf, wenn display auf inline gesetzt wird für ein non-replaced Element, ist Dir klar?
Wenn Dein Browser das trotzdem interpretiert, nutzt Du vermutlich einen Internet Explorer.
cu,
Andreas
Hallo Roland
<ul>
<li><a href="....">link1</a></li>
[...]
<li><a href="....">link6</a></li>
</ul>Diese liste möchte ich wie folgt darstellen:
link1 link2 link3
link4 link5 link6
Hat jemand eine Idee, wie ich dieses Problem lösen kann?
Hast Du es schon mit float statt mit
display: inline
probiert?
Freundliche Grüße
Vinzenz
Hallo Roland,
vielleicht hilft Dir der aktuelle Artikel Bulleted Lists: Multi-Layered Fudge von A List Apart bei der Lösung Deines Problems ...
Grüße,
Sebastian Becker