Jak wymusić listę jako pionową przy użyciu html css

Question

Mam listę, którą chcę dodać do <div>. Każdy listitem zawiera <div>, który z kolei zawiera obraz i ciąg tekstowy. Lista musi być pionowa. Próbowałem wstawić display:block dla <ul> z width:100%, ale lista przepływa od lewej do prawej w poziomie. Jak ustawić listę w pionie?

Answer 1

Spróbuj umieścić display: block w <li> tagów zamiast <ul>

Answer 2

Dodam to do CSS Li za

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

Answer 3

nadzieję, że to jest twoja struktura:

<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> 

Domyślnie zostanie dodany jeden po drugim wierszu:

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

jeśli chcesz, aby pionowe, wystarczy dodać pływak lewo li, dają szerokość i wysokość, upewnij się, że zawartość nie złamie szerokość:

| | | 
| | | 

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

Answer 4

CSS

li { 
    display: inline-block; 
} 

Works dla mnie też.