CODEWITHSUNDEEP
htmlcss
kavita deshpande
kavita deshpande

Reputation: 473

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> with width:100% but the list is flowing left to right horizontally. How do I make the list vertical?

Upvotes: 47

Views: 272525

Answers (4)

Sarath
Sarath

Reputation: 9146

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

Upvotes: 10

Andreas L.
Andreas L.

Reputation: 2923

CSS

li {
   display: inline-block;
}

Works for me also.

Upvotes: 8

Paul
Paul

Reputation: 141829

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

Upvotes: 63

Joe
Joe

Reputation: 82584

I would add this to the LI's CSS

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

Upvotes: 24

Related Questions