Как заставить список вертикально использовать html css

У меня есть список, который я хочу добавить в <div>. Каждый список содержит <div>, который, в свою очередь, содержит изображение и текстовую строку. Список должен быть вертикальным. Я попытался поставить display:block для <ul> с width:100%, но список идет слева направо по горизонтали. Как сделать список вертикальным?

Ответ 1

Попробуйте поместить display: block в теги <li> вместо <ul>

Ответ 2

Я бы добавил это к CSS LI

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

Ответ 3

Надеюсь, что это ваша структура:

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

По умолчанию он будет добавлять одну за другой строку:

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

если вы хотите сделать его вертикальным, просто добавьте float left to li, укажите ширину и высоту, убедитесь, что содержимое не будет нарушать ширину:

|  |  |
|  |  |

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

Ответ 4

CSS

li {
   display: inline-block;
}

Работает и для меня.