Какими способами можно сделать этот и подобные списки

319
24 января 2018, 13:44

Немного предисловия. С самого начало решил сделать этот список с помощью 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;
}

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

READ ALSO
Аккордеон внутри таблице html

Аккордеон внутри таблице html

Необходима простая реализация таблицы, с раскрывающимися строками при нажатии на строку/кнопкуМожно с использованием bootstrap

508
Какой индекс поставить в таблицу innodb mysql?

Какой индекс поставить в таблицу innodb mysql?

Есть большая таблица больше 10 гигобайт, есть запрос такого типа

300
MySQL сложный запрос JOIN

MySQL сложный запрос JOIN

Уважаемые, небольшой ступор как сделать запросЕсть две таблицы, в одной данные для каждого объекта, а во второй его состояние(id, время когда...

337
Ограничить JOIN одной строкой

Ограничить JOIN одной строкой

Есть таблица MySQL с заказами и timestamp и id этих заказов, а есть таблица с обработкой заказов, но обработок может быть несколькосвязка по id заказа

323