Можно ли использовать разные изображения значков для каждого элемента списка в неупорядоченном списке? - PullRequest
Новая
       2

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

12 голосов
/ 18 апреля 2011

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

Есть ли способ сделать это через CSS, или вы просто включили бы изображение значка в элемент списка (как показано ниже)? 

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>

Использование list-style-image на уровне ul делает все иконки одинаковыми, и я не смог найти другой способ. Большинство примеров, которые я нашел, учат вас, как использовать изображения в списке, но только если маркированные изображения одинаковы. Я определенно открыт для предложений и улучшений в том, как я пытаюсь это сделать.

спасибо 

<div class="content-nav">
  <ul>
    <li class="instructions"><a href="instructions.html">Instructions</a></li>
    <li class="voters"><a href="voters.html">Voters</a></li>
  </ul>
</div>

.content-nav {
    font-size:12px;
    width:160px;
    z-index:0;
}

.content-nav ul {
    padding:0 20px;
    margin:30px 0;
}

.content-nav li {
    padding:5px;
    margin:5px 5px;
}

.content-nav li a {
    color:#666;
    text-decoration:none;
}

.content-nav li.voters a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.voters a:hover {
    background:#0CF;
    color:#000;
}

.content-nav li.instructions a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.instructions a:hover {
    background:#0CF;
    color:#000;
}

Ответы [ 5 ]

14 голосов
/ 18 апреля 2011

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

<ul>
    <li class="li1">List 1</li>
    <li class="li2">List 2</li>
</ul>

.li1 {
   background:url('li1.gif') 50% 50% no-repeat no-repeat;
   padding-left: 5px;
}
.li2 {
   background:url('li2.gif') 50% 50% no-repeat no-repeat;
   padding-left: 5px;
}

Просто убедитесь, что отступ слева равен размеру изображения (илинемного больше, если вы хотите расстояние)

12 голосов
/ 18 апреля 2011

Использование селектора CSS3 :nth-child(), не требует дополнительной разметки для каждого <li> элемента:

Live Demo

HTML: 

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS: 

ul li:nth-child(1) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png');
}
ul li:nth-child(2) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png');
}
ul li:nth-child(3) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png');
}

Поддержка браузера: IE9 +, FF3.5 +, SA3.1+, OP9,5 +, CH2 +

1 голос
/ 18 апреля 2011

Вы пытаетесь установить свойство list-style-image для элемента a.Попробуйте вместо этого установить его на элемент li.

1 голос
/ 18 апреля 2011

Я бы предложил использовать иконки в качестве фоновых изображений для каждого элемента списка.При таком подходе вы также можете легко позиционировать «точки маркера» (особенно горизонтальное расположение).

0 голосов
/ 18 апреля 2011

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

...