Немного предисловия. С самого начало решил сделать этот список с помощью ul li дать margen padding каждому li отменить маркер и вместо него поставить картинку вроде все просто но когда ставил фон, картинка идет в отмену если ей ставить no-repeat (если не ставить это значение картинка забивает весь текст) это было из за значения display. Дальше пробовал позиционировать ее. Потом было еще куча проб с попыткой применения display значений к li и разных селекторов, даже пробовал заменить списки div (хоть это не красиво) но это не решало проблему т к нужна картинка и цвет с помощью одного background. Потом было 2ч ночи и написал сюда. За что извиняюсь, ошибки в вопросе и формулировке. После работы решил попробовать еще раз результат внизу. Просьба подсказать если делаю что то не так.
Итак вопрос как сделать подобный список, у меня получилось вот это но проблема я не знаю как изменить размер блока с текстом чтоб текст был посередине и изменить в идеале позицию картинок
Пример на jsfiddle html:
<ul id="block_list1">
<li class="list1">203-810-4300</li>
<li class="list2">203-810-4333</li>
<li class="list3">Contact@lpsum.com</li>
<li class="list4">50 W ashingto street</li>
<li class="list5">Sute 1048</li>
<li class="list6">lispume 0644</li>
</ul>
CSS:
#block_list1 li {
margin: 20px 0 0 20px;
padding: 3px 0 3px 3px;
color:#fff;
background-color: #000;
font: 15px Verdana;
width: 140px;
}
#block_list1 .list1 {
list-style-image: url(../images/imgPhone.jpg);
height: 20px; /*когда пытаюсь выравнять блок с текстом*/
}
#block_list1 .list2 {
list-style-image: url(../images/imgFax.jpg);
}
#block_list1 .list3 {
list-style-image: url(../images/imgMail.jpg);
margin: 30px 0 0 20px;
width: 190px;
}
#block_list1 .list4 {
list-style-image: url(../images/imgStreet.jpg);
margin: 30px 0 0 20px;
width: 165px;
}
#block_list1 .list5 {
margin: 2px 0 0 20px;
width: 90px;
}
#block_list1 .list6 {
margin: 2px 0 0 20px;
width: 150px;
}
Есть еще вариант сделать как здесь с использованием селекторов сестринских элементов но что делать с черным фоном?
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости