Как заставить элементы списка переходить в разные строки?

Я хочу использовать это

проблема в том, что элементы списка находятся в одних и тех же строках. как я могу поместить каждый элемент в следующую строку, чтобы сделать вертикальный список с изображением в начале каждой строки?

<ul id = "services-list">
  <li>
    <a href = "https://www.google.com" class = "image"></a>
    <div class = "content">
      <h3>Header</h3>
      <p>text goes here</p>
    </div>
  </li> 
  <li>
    <a href = "https://www.google.com" class = "image"></a>
    <div class = "content">
      <h3>Header</h3>
      <p>text goes here</p>
    </div>
  </li>
</ul>

css:

/*a little bit of reset*/
#services-list, #services-list p, #services-list h3 {
  list-style: none;
  margin:0; padding:0;
}    
#services-list > li {
  float:left;
  margin-right: 20px;
  width: 130px;
}    
#services-list > li > .image {
  display:block;
  float:left;
  margin-right:10px;
}

/*
this instructions are to force the dimensions of image and its container <a>
*/
#services-list > li > .image,
#services-list > li > .image > img {
  width:24px; height:24px;
}

🤔 А знаете ли вы, что...
HTML5 внедряет форматирование и стилизацию с помощью CSS3 для создания более привлекательных веб-страниц.


49
4

Ответы:

В этом примере списки перемещаются так, чтобы они располагались бок о бок с использованием CSS.

<style>
    li { float: left; list-style: none; }
</style>

Решено

Просто удалите float слева из приведенного ниже css, и все готово ...

#services-list > li{
  float: none;
}

Вы также можете добавить ширину 100% к элементам li

#services-list > li {
    width: 100%;
}

Для вашего кода это работает:

li{
  list-style: none !important;
  float: left !important;
  width: 100% !important;
}

см. здесь https://codepen.io/agamj474/pen/zJmrde