Javascript 玩HTML';s有序列表编号项目符号
有人能想出一种方法来使用Javascript 玩HTML';s有序列表编号项目符号,javascript,html,css,Javascript,Html,Css,有人能想出一种方法来使用ol/li列表中的数字来标记图像吗 <ol> <li><img /></li> <li><img /></li> <li><img /></li> </ol> 其中每个方块都是一个小剖面图 我知道我可以在li中插入一个带有数字的新元素,并根据需要对其进行操作,但我希望使用内置的ol编号进行操作。看起来有点老套,但这是可行的(至少
ol
/li
列表中的数字来标记图像吗
<ol>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ol>
其中每个方块都是一个小剖面图
我知道我可以在
li
中插入一个带有数字的新元素,并根据需要对其进行操作,但我希望使用内置的ol
编号进行操作。看起来有点老套,但这是可行的(至少在firefox中):
ol{}
欧利{
浮动:左;
列表样式位置:内部;
位置:相对位置;
宽度:100px;
高度:100px;
右边距:5px;
线高:170px;
文本缩进:85px;
颜色:#fff;
}
欧利img{
位置:绝对位置;
左:0;
排名:0;
z指数:-1;
}
如果我是你,我会选择附加元素解决方案
编辑:在chrome、IE9和IE8中测试。似乎在这两个方面都能始终如一地发挥作用。不过,IE7中的问题可能可以通过一些额外的特定于浏览器的css来解决。非常简单:
ol {
counter-reset: listCount;
}
li {
float: left;
border: 3px solid #f90;
counter-increment: listCount;
position: relative;
}
li:after {
content: counter(listCount,decimal-leading-zero);
position: absolute;
bottom: 0;
right: 0;
width: 2em;
height: 2em;
color: #fff;
background-color: rgba(0,0,0,0.5);
text-align: center;
line-height: 2em;
}
当然,这需要用户拥有一个能够使用css生成内容的浏览器,这就排除了IE
参考资料:
<ol>
<li><img src="http://placekitten.com/100/100" /></li>
<li><img src="http://placekitten.com/100/100" /></li>
<li><img src="http://placekitten.com/100/100" /></li>
</ol>
ol {}
ol li {
float: left;
list-style-position: inside;
position: relative;
width: 100px;
height: 100px;
margin-right: 5px;
line-height: 170px;
text-indent: 85px;
color: #fff;
}
ol li img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
ol {
counter-reset: listCount;
}
li {
float: left;
border: 3px solid #f90;
counter-increment: listCount;
position: relative;
}
li:after {
content: counter(listCount,decimal-leading-zero);
position: absolute;
bottom: 0;
right: 0;
width: 2em;
height: 2em;
color: #fff;
background-color: rgba(0,0,0,0.5);
text-align: center;
line-height: 2em;
}