Wie erzwinge ich eine vertikale Liste mit HTML-CSS

Lesezeit: 2 Minuten

Benutzer-Avatar
kavita deshpande

Ich habe eine Liste, die ich zu einer hinzufügen möchte <div>. Jedes Listenelement enthält eine <div> die wiederum ein Bild und eine Textzeichenfolge enthalten. Die Liste muss vertikal sein. Ich habe Putting versucht display:block für die <ul> mit width:100% aber die Liste fließt horizontal von links nach rechts. Wie mache ich die Liste vertikal?

  • Kannst du uns bitte einen Code zeigen?

    – Paulus

    15. Juli 2011 um 5:58 Uhr

Benutzer-Avatar
Paul

Versuchen Sie es mit dem Putten display: block in dem <li> Tags statt der <ul>

  • Danke vielmals! es ist jetzt eine vertikale Liste, aber die Ausrichtung ist links. Ich möchte, dass es im Mittelpunkt steht

    – kavita deshpande

    15. Juli 2011 um 6:37 Uhr

  • (Das ist eine alte Frage, ich weiß) Es gibt hier zwei Szenarien: 1) wenn du das willst Textausrichtung Zentrum sein, dann verwenden text-align: center auf der ul; Wenn Sie jedoch möchten, dass die Liste selbst auf dem Bildschirm zentriert wird und der Text weiterhin linksbündig ausgerichtet ist, definieren Sie a width oder max-width Eigenschaft und hinzufügen margin-left: auto; margin-right: auto; dazu.

    – rparz

    18. April 2016 um 8:26 Uhr


Ich würde dies dem CSS des LI hinzufügen

.list-item
{
    float: left;
    clear: left;
}

  • Ich muss das clear:left; und es funktioniert ruhig, eine Ahnung warum?

    – Prageeth Godage

    28. August 2018 um 2:20 Uhr


Benutzer-Avatar
Sarah

Hoffe das ist deine Struktur:

   <ul> 
     <li>
        <div ><img.. /><p>text</p></div>
    </li>
     <li>
        <div ><img.. /><p>text</p></div>
    </li>
     <li>
        <div ><img.. /><p>text</p></div>
    </li>
   </ul> 

Standardmäßig wird es nacheinander hinzugefügt:

-----
-----
-----

Wenn Sie es vertikal machen möchten, fügen Sie einfach float left zu li hinzu, geben Sie Breite und Höhe an, stellen Sie sicher, dass der Inhalt die Breite nicht unterbricht:

|  |  |
|  |  |

li
{
   display:block;
   float:left;
   width:300px; /* adjust */
   height:150px; /* adjust */
   padding: 5px; /*adjust*/
}

CSS

li {
   display: inline-block;
}

Funktioniert bei mir auch.

1225320cookie-checkWie erzwinge ich eine vertikale Liste mit HTML-CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy