Liste 2-spaltig darstellen

[Lou]

Hallo,
ich würde gerne eine Liste (erstellt mit ul und li) zweispaltig darstellen. Es sollen also jeweils zwei Listenpunkte nebeneinander dargestellt werden. Mit Tabellen möchte ich das nicht machen, sondern dachte an CSS.

Wie kann man das denn am besten mit CSS umsetzen?

Danke für eure Hilfe
Lou

[Froschpopo]

Hi,

display:inline

[Lou]

Hi,
danke für die schnelle Antwort.
Das display:inline kommt dann als style in jedes zweite LI-element?

Gruß
Lou

[Froschpopo]

Richtig. inline ist das Gegenteil zu "block".

[Lou]

Sorry,
stehe echt auf dem Schlauch.

Wie kann ich denn folgendes nun in zwei Spalten bringen?

<style type="text/css">
 li {
  width:150px;
 }

.dispInline {
  display:inline;
 }

</style>
<ul>
    <li class="dispInline">2</li>
    <li>34567</li>
    <li class="dispInline">4</li>
    <li>345</li>
    <li class="dispInline">6</li>
    <li>34567345673456734567</li>
</ul>

[Froschpopo]

So machst Du aber lieber keine Tabelle.

li {
   width: 150px;
   display: inline;
}

Für die nächsten Spalten machst Du einen neuen Absatz bzw. das sieht dann auch im lynx schöner aus.

[Lou]

Hallo,
du bist ja echt immer sehr schnell.
Leider lässt am Freitagabend meine Konzentration etwas nach.

Also, wenn ich nun deine li-Klasse einbaue, dann werden alle LI-Elemente hintereinander dargestellt. Allerdings will ich ja nach jedem 2. element  in eine neue Zeile umbrechen.

Wie geht das denn?

Sorry, aber ich raff´s echt grade nicht.

Danke
Lou

[Lou]

Hallo,
hat vielleicht noch jemand ne Idee?
Den Erklärungen von "Froschpopo" konnte ich nicht ganz folgen.

Danke
Lou

[Felix Riesterer]

Liebe(r) Lou,

hat vielleicht noch jemand ne Idee?
Den Erklärungen von "Froschpopo" konnte ich nicht ganz folgen.

zu meinem Vorschlag hast Du bisher nix gesagt... Aber vielleicht interessiert er Dich auch net - ist mir mittlerweile nimmer so wichtig.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Liebe(r) Lou,

Das display:inline kommt dann als style in jedes zweite LI-element?

NEIN!!! Das hört sich ja nach inline-Styles in der form <li style="display:inline">...</li> an... Das ist nicht das, was Du willst! Glaube mir! Du möchtest in einem globalen Stylesheet (am besten in einer externen CSS-Datei) Deine Liste stylen.

Meine Idee wäre nicht display:inline, sondern ein anderer Ansatz gewesen. Wie das in etwa aussehen könnte, siehst Du auf der Lehrer-Seite meiner Schule.
Meine ListItems haben eine feste Breite bekommen. Damit sie nebeneinander zu liegen kommen, werden alle ListItems gefloatet (float:left). Durch die Breite der Liste an sich (<ul>) und die feste Breite der Listenelemente (<li>) kommt der Browser zu der Anzahl "Spalten". Anders als in einer Tabelle lassen sich die Listenelemente nur von links nach rechts und nicht von oben nach unten anordnen. Es entsteht zwangsläufig folgende Struktur:

Mit float:left            eine Tabelle könnte aber dieses
1  2  3  4                    1  4  7 ...
5  6  7  8                    2  5  8 ...
9...                          3  6  9 ...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Schuer]

Wie kann man das denn am besten mit CSS umsetzen?

Dieser ALA-Artikel wird dir helfen:

CSS Swag: Multi-Column Lists
http://www.alistapart.com/articles/multicolumnlists/

Viele Grüße!
_ds