How to force a list to be vertical using html css
I would add this to the LI's CSS
.list-item
{
float: left;
clear: left;
}
Try putting display: block
in the <li>
tags instead of the <ul>
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*/
}