Cómo forzar que una lista sea vertical usando html css

Question

Tengo una lista que quiero agregar a un <div>. Cada elemento de lista contiene un <div> que a su vez contiene una imagen y una cadena de texto. La lista debe ser vertical. Intenté poner display:block para el <ul> con width:100% pero la lista está fluyendo de izquierda a derecha horizontalmente. ¿Cómo hago que la lista sea vertical?

Answer 1

trate de poner display: block en los <li> etiquetas en lugar de la <ul>

Answer 2

me gustaría añadir esto a CSS del LI

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

Answer 3

Esperanza esta es su estructura:

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

Por defecto, se agregará una fila después de otra:

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

si quieres que sea vertical, sólo tiene que añadir flotador izquierda a li, darle la anchura y la altura, asegúrese de que el contenido no se romperá el ancho:

| | | 
| | | 

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

Answer 4

CSS

li { 
    display: inline-block; 
} 

Obras para mi tambien.