HTML의 정렬 된 목록 번호 글 머리 기호로 재생

Question

ol/li 목록의 숫자를 사용하여 이미지에 레이블을 지정하는 방법을 생각해 본 사람이 있습니까? 각 사각형은 작은 프로필 사진이다

------ ------ ------ 
| | | | | | 
| | | | | | 
| 1| | 2| | 3| 
------ ------ ------ 

: 일부 CSS와

<ol> 
    <li><img /></li> 
    <li><img /></li> 
    <li><img /></li> 
</ol> 

는 다음 출력해야 적용.

li에 숫자가있는 새 요소를 삽입하고 필요에 따라 조작 할 수 있다는 것을 알고 있지만, inbuilt ol 번호 매기기를 사용하고 싶습니다.

Answer 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; 
} 

JS Fiddle demo.

물론 이것은 사용자가 CSS로 생성 된 콘텐츠를 사용할 수있는 용량을 가진 브라우저를 필요로합니다. 이는 꽤 IE를 배제합니다.

참고 :

• CSS-generated counters.

Answer 2

조금 해키 IMHO을 보인다 그러나 이것은 (파이어 폭스이어야에) 작동 : 내가 당신이라면

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; 
} 

난 그냥 추가 요소 솔루션과 함께 갈 것입니다.

EDIT : 크롬, IE9 및 8에서 테스트되었습니다. 둘 다 일관되게 작동하는 것으로 보입니다. 그러나 IE7의 문제는 약간의 브라우저 별 CSS로 해결할 수 있습니다. 충분히