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