• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verschachtelte Liste: Unterpunkte horizontal auf gleicher Höhe wie Elternelement

Status
Für weitere Antworten geschlossen.
P

petervna

Neues Mitglied
Code: 
<ul>

<li>Kategorie 1
	<ul>
	<li>Unterpunkt1</li>
	<li>Unterpunkt 2</li>
	</ul>
</li>

<li>Kategorie 2
	<ul>
	<li>Unterpunkt 1</li>
	<li>Unterpunkt 2</li>
	</ul>
</li>

<li>Kategorie 3
	<ul>
	<li>Unterpunkt 1</li>
	<li>Unterpunkt 2</li>
	</ul>
</li>

</ul>

Kategorie 1, Kategorie 2 und Kategorie 3 sollen vertikal dargestellt werden.
Die Unterpunkte sollen allerdings auf der gleichen Höhe wie die jeweilige Kategorie horizontal dargestellt werden.

Endergebnis soll dann ungefähr so aussehen:

Kategorie 1 Unterpunkt 1 Unterpunkt 2
Kategorie 2 Unterpunkt 1 Unterpunkt 2
Kategorie 3 Unterpunkt 1 Unterpunkt 2

Problem liegt bei mir,
dass ich die Unterpunkte nicht auf die gleiche Höhe von "Kategorie" bekomme (sondern darunter).
 
Ich hätte folgendes anzubieten:
Code: 
<html>
<head>
  <title>Horizontale Liste</title>
  <style type="text/css">
    li { display: inline; }
  </style>
</head>
<body>
  <ul>
    <li style="font-weight:bold;">Kategorie 1</li>
    <li>Unterpunkt 1</li>
    <li>Unterpunkt 2</li>
  </ul>
  <ul>
    <li style="font-weight:bold;">Kategorie 2</li>
    <li>Unterpunkt 1</li>
    <li>Unterpunkt 2</li>
  </ul>
  <ul>
    <li style="font-weight:bold;">Kategorie 3</li>
    <li>Unterpunkt 1</li>
    <li>Unterpunkt 2</li>
  </ul>
</body>
</html>

Das sieht dann so aus:
Kategorie 1 Unterpunkt 1 Unterpunkt 2
Kategorie 2 Unterpunkt 1 Unterpunkt 2
Kategorie 3 Unterpunkt 1 Unterpunkt 2
 
Danke für deine Antwort.

Optisch genau das, was ich will.
Nur wäre es prima, wenn dafür eine Liste verwendet wird.
Bei deinem Beispiel sind es ja 3 Listen.
 
Dann wird einfach ein UL dazugesetzt ;-)
Code: 
<html>
<head>
  <title>Horizontale Liste</title>
  <style type="text/css">
    li { display: inline; }
  </style>
</head>
<body>
  <ul>
    <ul>
      <li style="font-weight:bold;">Kategorie 1</li>
      <li>Unterpunkt 1</li>
      <li>Unterpunkt 2</li>
    </ul>
    <ul>
      <li style="font-weight:bold;">Kategorie 2</li>
      <li>Unterpunkt 1</li>
      <li>Unterpunkt 2</li>
    </ul>
    <ul>
      <li style="font-weight:bold;">Kategorie 3</li>
      <li>Unterpunkt 1</li>
      <li>Unterpunkt 2</li>
    </ul>
  </ul>
</body>
</html>
 
Stimmt. Aber anders geht es nicht. Wenn Man es Validat hinkriegen möchte, sieht es so aus:

Kategorie 1
Unterpunkt 1 Unterpunkt 2
Kategorie 2
Unterpunkt 1 Unterpunkt 2
Kategorie 3
Unterpunkt 1 Unterpunkt 2

Oder du entscheidest dich für meinen ersten Vorschlag, und machst drei Listen. Man kann leider nicht alles haben. :cry:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben