Question

嗨，我有使用图像样式化html列表的问题。我知道如何更换默认＆＃34;图像＆＃34; （点，矩形等..）与我的形象。

1）造型＆＃34; ul＆＃34;使用＆＃34; list-style-image＆＃34;

ul{
padding-left: 26px;
list-style-image:url("../../img/ic-odrazka.png")
}

2）造型＆＃34; li＆＃34;使用＆＃34; background-image＆＃34;

ul{
  padding-left: 0px;
}
li{
  padding-left: 26px;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("../../img/ic-odrazka.png");
}

问题是当我使用列表中的列表时，两个解决方案都不起作用。 =＆GT;解决方案在代码结构中不起作用：

<ul>
  <li>one</li>
  <li>two</li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>one1</li>
      <li>two2</li>
    </ul>
  </li>
  <li>next</li>
</ul>

有什么方法可以让它发挥作用吗？

Jsfiddle example here

Answer 1

如果你想在纯CSS中使用它，那么有几种可能的变体可以做到这一点。一个需要HTML更改，而其他更改但它有其局限性：

方法＃01（使用HTML更改）：

在这个方法中，我们将在li中创建一个额外的元素，并将样式应用于它而不是列表项。

考虑以下修改后的HTML：

<ul>
  <li><span>one</span></li>
  <li><span>two</span></li>
  <li>
    <ul>
      <li><span>one</span></li>
      <li><span>two</span></li>
      <li><span>one1</span></li>
      <li><span>two2</span></li>
    </ul>
  </li>
  <li><span>next</span></li>
</ul>

＆＃13;

ul {
  list-style: none;
}
ul li > span {
  display: block;
  padding-left: 26px;
  list-style-type: none;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("http://sablony.ekonstrukter.cz/sablony/162/ikona_nabidky.gif");
}

＆＃13;

<ul>
  <li><span>one</span></li>
  <li><span>two</span></li>
  <li>
    <ul>
      <li><span>one</span></li>
      <li><span>two</span></li>
      <li><span>one1</span></li>
      <li><span>two2</span></li>
    </ul>
  </li>
  <li><span>next</span></li>
</ul>

＆＃13;

方法＃02（没有HTML更改）：

此方法不需要代码中的任何HTML更改。在这种技术中，我们将使用叠加隐藏多余的列表图像。以下是步骤：

使用:before或:after嵌套列表的伪元素创建一个叠加层，其中包含相同或更多width / height子弹图像。
在此叠加层上应用与background-color最近的祖先相同的background。
将此叠加层放置在包含嵌套列表的父li的项目符号的顶部。

注意：仅当最近的祖先具有实体background-color时才会起作用（在渐变或背景图像的情况下，它不会起作用）。

＆＃13;

body {
  background: white;
  margin: 0;
}
ul{
  position: relative;
  list-style: none;
}
li{
  padding-left: 26px;
  list-style-type: none;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("http://sablony.ekonstrukter.cz/sablony/162/ikona_nabidky.gif");
}

li ul:before {
  background: white;
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  left: -28px;
  top: 2px;
}

＆＃13;

<ul>
  <li>one</li>
  <li>two</li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>one1</li>
      <li>two2</li>
    </ul>
  </li>
  <li>next</li>
</ul>

＆＃13;

方法＃03（使用JavaScript / jQuery）：

在这个方法中，我们将选择具有嵌套列表的列表项，其中包含一些像jQuery等库。下面是使其工作所需的必要代码：

jQuery代码：

$('ul li:has("ul")').addClass('has-list');

<强> CSS：

li.has-list {
  background: none;
}

＆＃13;

$(function() {
  $('ul li:has("ul")').addClass('has-list');
});

＆＃13;

ul{
  padding-left: 0px;
}
li{
  padding-left: 26px;
  list-style-type: none;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("http://sablony.ekonstrukter.cz/sablony/162/ikona_nabidky.gif");
}
li.has-list {
  background: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>one</li>
  <li>two</li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>one1</li>
      <li>two2</li>
    </ul>
  </li>
  <li>next</li>
</ul>

＆＃13;

Answer 2

为包含另一个<li>的{{1}}添加一个ID（＆＃34;内部＆＃34;然后执行

<ul>

在CSS中

。如果您有多个#inner { list-style: none; background-image: none; }包含<li>，则可以使用课程执行此操作。

或使用jQuery动态：

<ul>

列表与图像列表

2 个答案: