Benutzerdefinierte Suche

CSS: verschachtelte Listen - vertikal und horizontal darstellen

  1. Manjo

    Manjo Thread StarterMacUser Mitglied

    Mitglied seit:
    25.07.2005
    Beiträge:
    903
    Zustimmungen:
    22
    Hallo!

    Ich möchte 2 Listen ineinander verschachteln, wobei die Punkte der ersten Ebene untereinander, die der jeweiligen Unterebene nebeneinander dargestellt werden. Ich weiß, es geht auch ohne 2. Liste, einfach aneinanderreihen, aber sauberer ist es hier nunmal mit einer 2. Liste.
    Code:
    <ul>
      <li>Ebene 1_1
        <ul>
          <li>Ebene 1_2_1</li>
          <li>Ebene 1_2_2</li>
          <li>Ebene 1_2_3</li>
          <li>Ebene 1_2_4</li>
        </ul>
      </li>
      <li>Ebene 2_1</li>
      <li>Ebene 3_1
        <ul>
          <li>Ebene 3_2_1</li>
          <li>Ebene 3_2_2</li>
        </ul>
      </li>
      <li>Ebene 4_1</li>
      <li>Ebene 5_1</li>
    </ul>
    
    dazu in css folgendes:
    HTML:
    ul li ul {margin: 0; padding:0;list-style-type:none;}
    ul li ul li {float:left;}
    Das führt allerdings dazu, dass die Elemente der Ebene 2_1 und folgende nicht mehr in der gleichen Spalte wie Ebene 1_1 sondern direkt hinter dem letzen Element der 2. Ebene angeordnet werden. Mit clear:both; kann ich nicht arbeiten, da sich das Ganze in einer Umgebung, die bereits mit float arbeitet, befindet.

    Eine Idee?

    Viele Grüße
    Manjo.
     
    Manjo, 25.07.2006
  2. 2nd

    2ndMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Meinst Du es so?


    [​IMG]


    Wenn ja heisst das Schlüsselwort "display: inline" für die 2. Liste.


    PHP:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <
    title>Liste</title>
    <
    style type="text/css">
    <!--
    .
    nav_1 {
        
    color:#FF0000;

    }

    .
    nav_2 {
        
    color:#00FF00;

    }

    .
    nav_2 li {
        
    displayinline;

    }
    -->
    </
    style>
    </
    head>

    <
    body>

    <
    ul class="nav_1"
        <
    li>Ebene 1_1 
            
    <ul class="nav_2"
                <
    li>Ebene 1_2_1</li
                <
    li>Ebene 1_2_2</li
                <
    li>Ebene 1_2_3</li
                <
    li>Ebene 1_2_4</li
            </
    ul
        </
    li>
        <
    li>Ebene 2_1</li
        <
    li>Ebene 3_1 
            
    <ul class="nav_2"
                <
    li>Ebene 3_2_1</li
                <
    li>Ebene 3_2_2</li
          </
    ul
        </
    li>
        <
    li>Ebene 4_1</li
        <
    li>Ebene 5_1</li>
    </
    ul>


    </
    body>
    </
    html>


    2nd
     
  3. Manjo

    Manjo Thread StarterMacUser Mitglied

    Mitglied seit:
    25.07.2005
    Beiträge:
    903
    Zustimmungen:
    22
    Oh ja klasse! Danke!

    Man, manchmal sieht man den Wald vor lauter Bäumen nicht mehr.
     
    Manjo, 25.07.2006
Die Seite wird geladen...
Ähnliche Themen - CSS verschachtelte Listen
  1. dennz2017
    Antworten:
    2
    Aufrufe:
    314
  2. hello
    Antworten:
    1
    Aufrufe:
    239
  3. Hoooray
    Antworten:
    2
    Aufrufe:
    335
    Hoooray
    21.07.2015
  4. Kemna
    Antworten:
    6
    Aufrufe:
    570
  5. maceis
    Antworten:
    7
    Aufrufe:
    1.274