Question

这张照片解释了这个故事：

http://demo.krsites.com/wp-content/uploads/2015/01/stack.jpg

图片的第一部分是我想要做的，第二部分是我所拥有的。

html部分只不过是：

<ol>
  <li> content <li>
</ol>

这是CSS：

ol {
    color: white;
    background-image: url(http://demo.krsites.com/wp-content/uploads/2015/01/pinksquare.gif);
    background-repeat: no-repeat;
}

我试图用带有负数的边距和填充移动gif框但没有任何成功。

此外整个路线现在搞砸了......

请帮忙吗？

Answer 1

我建议使用CSS生成的内容来设置列表计数器的样式，而不是尝试将背景图像与文本对齐：

＆＃13;

ol,
li {
  /* removes the default counter: */
  list-style-type: none;
}

ol {
  /* optional, this restarts the counter for each <ol> element: */
  counter-reset: listCount;
}

li {
  /* incrementing the counter in each <li>: */
  counter-increment: listCount;
}

li::before {
  /* displaying the counter, the counter function takes a
     second argument if required, to set the counter's "type":
     counter(listCount, roman) for example: */
  content: counter(listCount);
  color: #fff;
  font-weight: bold;
  background-color: rgba(155,0,155,0.5);
  text-align: center;
  padding: 0 0.4em;
}

＆＃13;

<ol>
  <li> content </li>
  <li> content </li>
</ol>

＆＃13;

有序列表方框不能按计划工作

1 个答案: