How to force a list to be vertical using html css

Answer 1

Try putting display: block in the <li> tags instead of the <ul>

Answer 2

CSS

li {
   display: inline-block;
}

Works for me also.

Answer 3

Hope this is your structure:

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

By default, it will be add one after another row:

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

if you want to make it vertical, just add float left to li, give width and height, make sure that content will not break the width:

|  |  |
|  |  |

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

Answer 4

I would add this to the LI's CSS

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