Я хочу использовать это
проблема в том, что элементы списка находятся в одних и тех же строках. как я могу поместить каждый элемент в следующую строку, чтобы сделать вертикальный список с изображением в начале каждой строки?
<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 для создания более привлекательных веб-страниц.
В этом примере списки перемещаются так, чтобы они располагались бок о бок с использованием 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