Можно ли сделать такой неупорядоченный список с помощью CSS? - PullRequest
Новая
       20

Можно ли сделать такой неупорядоченный список с помощью CSS?

3 голосов
/ 20 марта 2010

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

alt text

Я не могу использовать 2 изображения для одного <li> тега

Если я использую стрелку в качестве background и padding-left, тогда border-bottom также будет отображаться под изображением.

Не могу использовать margin-left и background-position тоже, наверное?

Есть идеи?

Спасибо

Ответы [ 3 ]

9 голосов
/ 20 марта 2010

Я загрузил для вас пример, который вы можете просмотреть и скачать по адресу: http://joegreen.co.uk/stackoverflow/img-list/img-list.html

Вот CSS и разметка для справки. Он был протестирован в Firefox 3.6, Safari 4, Chrome, IE7 и IE8.

CSS: 

#list-container {
    width: 460px;
    padding: 15px 15px 15px 30px;
    background-color: #f6f4ea;
    border: 1px solid #e3e1d5;
    font: 12px Verdana, Geneva, sans-serif;
}

#list-container ul {
    list-style: disc outside url('./bullet.gif');
    margin: 0;
    padding: 0;
}

#list-container ul li {
    margin: 7px 0 0 0;
    padding: 0 0 7px 0;
    border-bottom: 1px dotted #7a7974;
}

HTML: 

<div id="list-container">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>Donec tellus felis, euismod non egestas sed, suscipit a leo. Ut quis augue vel mauris mollis volutpat.</li>
        <li>Morbi varius porttitor massa, sed lobortis magna ornare et.</li>
        <li>Fusce blandit risus varius felis posuere vehicula iaculis turpis bibendum. Integer a molestie nunc.</li>
        <li>In blandit neque ac dui laoreet tincidunt dapibus leo pulvinar. Sed nec ligula non orci vulputate vulputate.</li>
    </ul>
</div>
3 голосов
/ 20 марта 2010

Это способ использовать изображения в качестве маркеров ...

http://css.maxdesign.com.au/listutorial/11.htm (см. Код, вставленный ниже.)

Единственное, что вам нужно добавить после этого, это пунктирные границы снизу для каждого элемента списка (должно быть довольно просто.) 

.iconlist
{
list-style: none;
margin: 0;
padding: 0;
}

li.pdf
{
background-image: url(bullet_pdf.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.doc
{
background-image: url(bullet_doc.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.text
{
background-image: url(bullet_text.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.htm
{
background-image: url(bullet_htm.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

HTML CODE
<ul class="iconlist">
<li class="pdf"><a href="#">Milk</a></li>
<li class="text"><a href="#">Eggs</a></li>
<li class="htm"><a href="#">Cheese</a></li>
<li class="doc"><a href="#">Vegetables</a></li>
<li class="text"><a href="#">Fruit</a></li>
</ul>
1 голос
/ 20 марта 2010

Использование: 

list-style-image:url("/images/arrow.gif");

с полем и окантовкой на листе.

...