Блог

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

Я был бы признателен за некоторую помощь.

Вот мой исходный HTML-код:

 <div class="my-clip-list">
<ul>
   <li class="one">One</li>
   <li class="two">Two</li>
   <li class="three">Three</li>
</ul>
</div>
  

И мой первоначальный CSS:

 .my-clip-list {position: relative;}
.my-clip-list ul {position: absolute;}
.my-clip-list ul li {line-height: 24px; content:url([url_of_sprite]);}
.my-clip-list ul li.one {clip: rect(top right bottom left)}
.my-clip-list ul li.two {clip: rect(top right bottom left)}
.my-clip-list ul li.three {clip: rect(top right bottom left)}
  

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

Пожалуйста, помогите, если сможете.

Спасибо.

Может быть, это потому, что сами элементы li не позиционируются как «абсолютные», а только как UL? Просто догадываюсь по документации / ссылкам.