style - title tag html

Cómo forzar una lista para que 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. He intentado poner display:block para el <ul> con width:100% pero la lista fluye de izquierda a derecha horizontalmente. ¿Cómo hago la lista vertical?

Answer 1

CSS

li {
   display: inline-block;
}

Funciona para mí también.

Answer 2

Espero que esta sea tu 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 después de otra fila:

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

si desea hacerlo vertical, simplemente agregue flotador a la izquierda a li, proporcione ancho y alto, asegúrese de que el contenido no rompa el ancho:

|  |  |
|  |  |

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

Answer 3

Intente poner display: block en las etiquetas <li> lugar de <ul>

Answer 4

Yo añadiría esto al CSS de la LI

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