How to force a list to be vertical using html css

I have a list i want to add to a <div>. Each listitem contains a <div> which in turn contain an image and a text string. The list must be vertical. I ve tried putting display:block for the <ul> w开发者_开发问答ith width:100% but the list is flowing left to right horizontally. How do I make the list vertical?

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

I would add this to the LI's CSS

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

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*/
}

CSS

li {
   display: inline-block;
}

Works for me also.