ol有序列表居然没有按顺序显示的奇怪现象

来源：[标签:出处] 作者：[标签:作者] 时间：2008-02-19 点击：

ol有序列表是按顺序显示的一种列表形式，但如果你没有声明或给li列表项设置了宽度，可能会出现不按顺序显示的奇怪现象。我们看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>person resume</title>
<style>
body{margin:5px 0;text-align:center;background-color:#828598;}

#all{margin:auto;text-align:left;background:#ffffff;width:700px;}
#head{height:200px;background:url(sky2.jpg);}
#general,#judge,#object,#skill,#experience,#award{width:660px;padding:2px 5px 0;margin:0 auto;}
#top{border-bottom:1px #8C8C8C dashed;padding:5px 5px 2px;margin:5px 0;}
#left{font:bold 14px "Times New Roman", Arial,Times, serif;}

h2{width:650px;font-size:18px;color:#EFEEE3;text-align:left;background-color:#E56B2E;padding:8px 10px 4px;margin-left:2px;margin-bottom:2px;}

#oul{margin:0px 5px 0;}

li{border-bottom:1px #8C8C8C dashed;padding:5px 5px 2px;list-style-position: inside;width:300px;}

#line{background-color:#828688;height:1px;font-size:1px;margin:10px 0;}

</style>
</head>

<div id="skill">
<h2>技能</h2>
<ol id="oul">
<li>熟悉windows各操作系统的使用，维护，安装及相关的网络管理</li>
<li>熟练掌握Dreamweave及photoshop的使用</li>
<li>熟悉asp，html，xhtml，css2.0，javascript；初步了解php，xml，rss</li>
<li>能够手写代码</li>
</ol>
</div>

<div id="foot">Last Modified:2005/12/07</div>
</div>

</body>
</html>

　　解决的方法是去旧li的宽度声明，或将宽度属性的值设为auto。看下面的代码：

h2{width:650px;font-size:18px;color:#EFEEE3;text-align:left;background-color:#E56B2E;padding:8px 10px 4px;margin-left:2px;margin-bottom:2px;}

#oul{margin:0px 5px 0;}

li{border-bottom:1px #8C8C8C dashed;padding:5px 5px 2px;list-style-position: inside;width:auto;}

#line{background-color:#828688;height:1px;font-size:1px;margin:10px 0;}

</style>
</head>

<div id="foot">Last Modified:2005/12/07</div>
</div>

</body>
</html>

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：li列表项标签中插入图片浮动出现的一种奇怪现象
下一篇：background-color奇怪的进入相临元素

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表