ol有序列表居然没有按顺序显示的奇怪现象_Div+CSS教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂備礁娲﹂埅绀慹deCMS閻熸瑥妫濋。鍫曞极濞嗘垟鏌�濞戞梹澹嗛埞鏍⒒閿燂拷缂佸鍠愬﹢鍥礉閳ヨ櫕鐝� 闂侇偄顦辩紞澶屾兜閺囨氨闉嶉柤杈ㄦ缁憋拷 闁哄啰濮撮崪鏍博濞嗘挻姣愮€规悶鍎遍崣锟�,闁谎勫劤鐎规娊寮堕崘顔兼濞戞挴鍋撻梺娆惧枛閸欏繘寮婚敓锟�!

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

代码调试框 [www.mb5u.com]

<!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。看下面的代码：