玩HTML's有序列表编号项目符号
Playing with HTML's ordered list number bullets
有人能想到一种方法来使用ol
/li
列表中的数字来标记图像吗?
<ol>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ol>
加上一些CSS应该输出如下内容:
------ ------ ------
| | | | | |
| | | | | |
| 1| | 2| | 3|
------ ------ ------
其中每个方块是一个小的头像。
我知道我可以在li
中插入一个带有数字的新元素,并根据需要进行操作,但我想用内置的ol
编号来做。
很简单:
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;
}
JS Fiddle demo.
当然,这需要用户有一个能够使用css生成内容的浏览器,这基本上排除了IE。
引用:
- CSS-generated计数器。
看起来有点俗气,但这是可行的(至少在firefox中):
http://jsfiddle.net/ztfzt/14/<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;
}
如果我是你,我会直接使用附加元素解决方案。
编辑:在chrome, IE9和ie8中测试。似乎两者都有效。但是,IE7中的问题可能可以通过一些额外的浏览器特定的css来修复。
相关文章:
- Jquery 读取编号组中选择下拉列表的数组
- CKEDITOR-将粗体应用于包含数字的编号列表
- 为Meteor数据创建编号列表
- jQuery:在具有相同类的对象列表中获取 DOM 中的对象编号
- 待办事项列表复选框编号逻辑
- 带有选择列表的自动编号
- CKEditor 4 手动调用编号列表
- 在 ReactJs 中的文本区域元素内创建一个编号列表
- 有没有更简单的方法可以在一个 UL 中获取 LI 列表编号
- 使用 javascript 循环将文本编号到现有列表元素
- 使用每个项目在KnockoutJS中创建编号列表's在可观测数组中的位置
- 将带编号的列表文本转换为嵌套的HTML列表
- 更改依赖于查询字符串的有序列表的起始编号
- 如果字符串是编号列表的一部分,正则表达式将检测到什么
- 拖动(使用jQuery)时,可排序列表编号没有按顺序显示
- 玩HTML's有序列表编号项目符号
- 我可以在列表编号中添加文本吗
- Vue.js-如何制作一个编号的输入列表
- AngularJS对条目列表进行反转显示了索引编号的非反转
- 想要在JavaScript中为随机生成的名称列表编号