经常做带序号的列表,如图
一般的写法是这样的
<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