将背景图像应用于多个<li>

Question

我在<ol>内的第一个列表项后面有一个背景剪贴板图片。

我希望它适用于所有列表项（不仅仅是第一个），我可以通过将类应用于每个<li>来实现这一点但是当它应该在{{{ 1}}级别。

上方显示仅显示在第一个列表项下的背景剪贴板图像。如何让它在每个列表项上工作？

<ol>

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: orderedlist;
}

ol>li {
  counter-increment: orderedlist;
  padding-left: 1.4em;
  line-height: 1.5;
}

ol>li:before {
  content: counter(orderedlist)".";
  display: inline-block;
  width: 1.52em;
}

.action-item {
  background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
  background-position: 15px 0px;
  background-repeat: no-repeat;
  background-size: 1.4em;
}

Answer 1

您不需要将.action-item类分配给每个<li>元素。目前，您只在<ol>元素上显示一次背景图像。

您可以将CSS规则从.action-item更改为.action-item li或ol.action-item li。

您可以使用以下解决方案：

＆＃13;

＆＃13;

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: orderedlist;
}
ol > li {
  counter-increment: orderedlist;
  padding-left: 1.4em;
  line-height: 1.5;
}
ol > li:before {
  content: counter(orderedlist);
  display: inline-block;
  width: 1.52em;
}
.action-item li {
  background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
  background-position: 15px 0px;
  background-repeat: no-repeat;
  background-size: 1.4em;
}

＆＃13;

<ol class="action-item">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5<br>multiline</li>
  <li>item 6</li>
</ol>

＆＃13;

＆＃13;

＆＃13;

有没有办法删除号码后的句号？

您可以使用content: counter(orderedlist)".";设置数字。有一个尾随句点。只需删除期间（"."）即可显示数字。

Answer 2

使用background-repeat并稍微调整尺寸：

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: orderedlist;
}

ol>li {
  counter-increment: orderedlist;
  padding-left: 1.4em;
  line-height: 1.5;
}

ol>li:before {
  content: counter(orderedlist)".";
  display: inline-block;
  width: 1.52em;
}

.action-item {
  background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
  background-position: 15px 0px;
  background-repeat: repeat-y;
  background-size: 1.5em;
}

<ol class="action-item">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

Answer 3

实际上，您当前的background-image不会应用于第一个li，而是ol上的...... {看起来就像应用于视觉上一样

如果background-image使用父类li

，请使用ol代替.action-item

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: orderedlist;
}

ol>li {
  counter-increment: orderedlist;
  padding-left: 1.4em;
  line-height: 1.5;
}

.action-item>li {
  background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
  background-position: 15px 0px;
  background-repeat: no-repeat;
  background-size: 1.4em;
}

ol>li:before {
  content: counter(orderedlist)".";
  display: inline-block;
  width: 1.52em;
}

<ol class="action-item">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

Answer 4

一切都好 只需使用.action-item li {}代替.action-item {}，就像这样 -

# valid value > var = 4 > h = hash.detect{|k,v| v["listing_id"] == var} > result = h.last["result_api"] if h #=> 15229 # Invalid value > var = 54654564 > h = hash.detect{|k,v| v["listing_id"] == var} > result = h.last["result_api"] if h #=> nil