[英]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小提琴演示 。
當然,這確實要求用戶擁有一個能夠使用css生成內容的瀏覽器,這很好地排除了IE。
參考文獻:
似乎有點hacky恕我直言,但這工作(至少在Firefox中):
<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和8中測試過。似乎在兩者中都能一致地工作。 然而,IE7中的問題可能會被一些額外的瀏覽器特定的CSS修復。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.