经常做带序号的列表，如图
一般的写法是这样的
<ul>
<li><strong>1</strong><a hef=”#”>经济学社</a></li>
<li><strong>2</strong><a hef=”#”>经济学社</a></li>
<li><strong>3</strong><a hef=”#”>经济学社</a></li>
<li><strong>4</strong><a hef=”#”>经济学社</a></li>
<li><strong>5</strong><a hef=”#”>经济学社</a></li>
</ul>
样式的写法 会把strong 设置成 会设置strong的背景为 图片
，里面的数字的位置会有一写偏移，可以设置padding 或者 display:inline-block 或者 display:block+float:left等方法来解决
可用strong符合语义化的要求么？目的是要一个有序号的列表，自然用 ol比ul更好一些。
<ol >
<li><a href="#">经济学社</a></li>
<li><a href="#">经济学社</a></li>
<li><a href="#">经济学社</a></li>
<li><a href="#">经济学社</a></li>
<li><a href="#">经济学社</a></li>
<li><a href="#">经济学社</a></li>
</ol>
现在的问题是怎么把填充到序号后面，放到li的背景中即可，但发现有很多错位，而且ie和 firefox下效果差别很大。因为默认list-style-position为 outside. Firefox和ie对outside的理解不同。这里要设置为 inside;
Style
.list-item { margin:0; padding:0; list-style-position:inside;}
.list-item li { line-height:1.4em; color:#fff; font-weight:bold; font-size:12px; background:url(images/list_serial_bg.gif) no-repeat left 50%; padding-left:4px; }
.list- item li a { font-weight:normal; color:#003399;
很遗憾会有一个’.’，最终的效果不完美，只是对语义化标签的一次尝试。
有解决方法的朋友可以提出来分享下 ；）
更多的带编号和背景的li编写心得请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
互联网
日期：2008-5-3
