嗨,我在样式与图像的html列表时遇到问题。
我知道两种方法如何用我的图像替换默认的“图像”(点,矩形等)。
1)用“列表样式图像”样式化“ ul”
ul{
padding-left: 26px;
list-style-image:url("../../img/ic-odrazka.png")
}
2)用“背景图像”样式化“ li”
ul{
padding-left: 0px;
}
li{
padding-left: 26px;
background-position: left 4px;
background-repeat: no-repeat;
background-image: url("../../img/ic-odrazka.png");
}
问题是当我使用列表中的列表时,两种解决方案都无法正常工作。
=>解决方案不适用于以下代码结构:
<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
最佳答案
如果要在纯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>
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");
}
<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>
方法#02(不更改HTML):
此方法不需要代码中的任何
HTML
更改。在这种技术中,我们将用覆盖图隐藏多余的列表图像。步骤如下:用嵌套项目列表的
:before
或:after
伪元素创建一个叠加层,其子弹图图像的子集图像与width
或height
/ background-color
相同。在此覆盖上应用与具有
background
的最近祖先相同的li
。将此叠加层恰好放在包含嵌套列表的父级
background-color
的项目符号上方。注意:仅当最接近的祖先具有实心时,此功能才有效(在渐变或背景图像的情况下不可用)。
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;
}
<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>
方法#03(使用JavaScript / jQuery):
在这种方法中,我们将选择具有嵌套列表的列表项,并带有一些库,例如jQuery等。下面是使其工作所需的必要代码:
jQuery代码:
$('ul li:has("ul")').addClass('has-list');
CSS:
li.has-list {
background: none;
}
$(function() {
$('ul li:has("ul")').addClass('has-list');
});
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;
}
<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>
关于html - 用图片列出 list ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41889035/