Liste mehrspaltig

[Roland Bär]

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

[MudGuard]

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

[Roland Bär]

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

[MudGuard]

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

[Vinzenz]

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

[Sebastian Becker]

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