45

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?

simeg
  • 1,889
  • 2
  • 26
  • 34
kavita deshpande
  • 453
  • 1
  • 4
  • 6

4 Answers4

60

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

simeg
  • 1,889
  • 2
  • 26
  • 34
Paul
  • 139,544
  • 27
  • 275
  • 264
  • Thanks a lot! it is now a vertical list but the alignment is to the left. I want it to be at the centre – kavita deshpande Jul 15 '11 at 06:37
  • 3
    (This is an old question, I know) There are two scenarios here: 1) if you want the _text alignment_ to be center, then use `text-align: center` on the `ul`; but if you want the list itself to be centered on the screen with the text still left aligned, then define a `width` or `max-width` property and add `margin-left: auto; margin-right: auto;` to it. – rpearce Apr 18 '16 at 08:26
22

I would add this to the LI's CSS

.list-item
{
    float: left;
    clear: left;
}
Joe
  • 80,724
  • 18
  • 127
  • 145
10

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*/
}
Mohammed
  • 37
  • 1
  • 4
Sarath
  • 9,030
  • 11
  • 51
  • 84
7

CSS

li {
   display: inline-block;
}

Works for me also.

Andreas L.
  • 2,805
  • 23
  • 23