일부 목록 항목에는 아래와 같이 텍스트 앞에 작은 아이콘을 추가해야 합니다.
이를 구현하는 방법은 다양합니다. 여기에서는 사용됩니다.
스팬 태그는 선 요소이며 너비와 높이가 없지만 display:block;을 통해 변경할 수 있습니다. 그러나 줄 바꿈이 발생합니다.
우편번호:
[html] m.sbmmt.com <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span>
여기서는 Padding-left를 사용하여 이 작은 아이콘의 모양을 공동으로 구현합니다. 그렇죠