奇怪的自然现象:ol有序列表居然没有按顺序显示的奇怪现象疯狂代码！

　　ol有序列表是按顺序显示

种列表形式

但如果你没有声明或给li列表项设置了宽度

可能会出现不按顺序显示

奇怪现象

我们看下面

代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.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; char<img src='/icons/34618set.gif' />=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, ser<img src='/icons/34618if.gif' />;}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><body><br/>省略若干<img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><br/><h2>自我评价</h2><br/><br/><h2>求职意向</h2>目标地点<br/>期望工资<br/>目标职位<br/><br/><h2>技能</h2><ol id=\"oul\"><li>熟悉windows各操作系统<img src='/icons/34618de.gif' />使用<img src='/icons/34618dou.gif' />维护<img src='/icons/34618dou.gif' />安装及相关<img src='/icons/34618de.gif' />网络管理</li><li>熟练掌握Dreamweave及photoshop<img src='/icons/34618de.gif' />使用</li><li>熟悉asp<img src='/icons/34618dou.gif' />html<img src='/icons/34618dou.gif' />xhtml<img src='/icons/34618dou.gif' />css2.0<img src='/icons/34618dou.gif' />javascript；初步了解php<img src='/icons/34618dou.gif' />xml<img src='/icons/34618dou.gif' />rss</li><li>能够手写代码</li></ol><br/><h2>工作经验&教育经历</h2><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><br/><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><br/><br/><ul id=\"oul\"><li></li><li></li></ul><br/><h2>证书</h2><ol id=\"oul\"></ol><br/>Last Mod<img src='/icons/34618if.gif' />ied:2005/12/07<br/><br/></body></html>

=\"ubbbuttonrt\">[ 可先修改部分代码再运行查看效果 ]

　　解决

思路方法是去旧li

宽度声明

或将宽度属性

值设为auto

看下面

代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.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; char<img src='/icons/34618set.gif' />=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, ser<img src='/icons/34618if.gif' />;}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><body><br/>省略若干<img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><br/><h2>自我评价</h2><br/><br/><h2>求职意向</h2>目标地点<br/>期望工资<br/>目标职位<br/><br/><h2>技能</h2><ol id=\"oul\"><li>熟悉windows各操作系统<img src='/icons/34618de.gif' />使用<img src='/icons/34618dou.gif' />维护<img src='/icons/34618dou.gif' />安装及相关<img src='/icons/34618de.gif' />网络管理</li><li>熟练掌握Dreamweave及photoshop<img src='/icons/34618de.gif' />使用</li><li>熟悉asp<img src='/icons/34618dou.gif' />html<img src='/icons/34618dou.gif' />xhtml<img src='/icons/34618dou.gif' />css2.0<img src='/icons/34618dou.gif' />javascript；初步了解php<img src='/icons/34618dou.gif' />xml<img src='/icons/34618dou.gif' />rss</li><li>能够手写代码</li></ol><br/><h2>工作经验&教育经历</h2><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><br/><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><img src='/icons/34618dou2.gif' /><br/><br/><ul id=\"oul\"><li></li><li></li></ul><br/><h2>证书</h2><ol id=\"oul\"></ol><br/>Last Mod<img src='/icons/34618if.gif' />ied:2005/12/07<br/><br/></body></html>

=\"ubbbuttonrt\">[ 可先修改部分代码再运行查看效果 ]

Tags:

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

延伸阅读

最新评论

发表评论

赞助商广告

随机更新

热门标注

最近更新

最新标注