Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS - <li> soll sich automatisch an ul anpassen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] CSS - <li> soll sich automatisch an ul anpassen

    Guten Morgen,

    ich habe eine Problem mit den <li> Tags, die sich in <ul> sich automatische eine Breite selbst geben.

    Mein Beispiel: jsfiddle.net

    Code:
    <ul>
        <li> Test </li>
        <li> Test 2 </li>
        <li> Test 3 </li>
        <li> Test 4 </li>
    <ul>
    Wenn ich die Breite von den <li> auf 25% setze, klappt alles wunderbar. Das möchte ich aber nicht.


  • #2
    Definiere „klappt“. Ich sehe das Fehlverhalten nicht. Ach so, du willst, dass sich die li-Elemente den zur Verfügung stehenden horizontalen Platz gleichmäßig unter sich aufteilen?

    Kommentar


    • #3
      Genau

      Kommentar


      • #4
        Zum Beispiel:

        - http://stackoverflow.com/questions/1...he-width-of-ul
        - http://stackoverflow.com/questions/5...available-spce

        Suchbegriff war: „css fill ul with li elements“

        (tl;dr: display: table;, display: table-cell;)

        Kommentar


        • #5
          mit 'display: table' und 'display: table-cell' hab ich es auch versucht. Wenn du den Content von den <li> kürzer und länger machst, werden sie nicht mehr gleichmäßig breit.

          Kommentar


          • #6
            So scheint es auf den ersten Blick zu klappen:

            HTML-Code:
            <!DOCTYPE html>
            <html>
                <head>
                    <title>title</title>
                    <style>
                        ul {
                            width: 600px;
                            display: table;
                            table-layout: fixed; /* optional */
                        }
            
                        ul li {
                            display: table-cell;
                            width: auto;
                            text-align: center;
                            border: 1px solid red;
                        }
                    </style>
                </head>
                <body>
            
                    <ul>
                        <li>short</li>
                        <li>loooooooooong</li>
                        <li>short</li>
                        <li>normal</li>
                        <li>tiny</li>
                    </ul>
            
                </body>
            </html>
            via: http://stackoverflow.com/a/10681442

            Kommentar


            • #7
              Danke
              table-layout: fixed ist es, was ich noch gebraucht hätte.

              Kommentar

              Lädt...
              X