关于html中li的问题

来源：互联网发布：手机淘宝账号怎么查看编辑：程序博客网时间：2024/06/10 00:34
关于html中列表的问题，全部亲身实践，大家一起探讨，谢谢！
吐槽一下：ie镇坑！！！
注释很重要！！！
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>列表</title><style type="text/css">#ul-test{    width:600px;    border:dashed #666666 1px;    padding-left:0;/*如果设置，ul和ol左边的默认空白（我觉得这默认的位置是给默认图标留的）*//*但是如果还想让默认图标或者自己设定的图标显示，那么就需要设置list-style-position:inside*//*这里设置margin-left:0;不行*/}#ul-test li{    height:30px;    /*这个位置设置可以让列表横向排列，但是会导致下面设置的list-style没有效果*/    /*display:inline;*/    /*list-style-position:outside;*//*outside是默认的情况*/    list-style-position:inside;/*inside表示图标在li内部，outside表示在外面，*/    list-style-image:url(8232.png);/*改变列表前面的图标，可以是自己的图片*/    background-color:#CCC;    /*list-style:none;*//*css的执行是顺序执行，如果写在前面，后面的list-style会把它覆盖掉*//*写在后面就会就会覆盖前面的list-style*//*重点忘写了，设置这个属性会去掉前面的默认图标*/}#ol-test{    width:600px;    border:dotted #666666 1px;    padding-left:0;    white-space:nowrap;}#ol-test li{    height:30px;    background-color:#CCC;    list-style-image:url(8232.png);/*ul、ol都可设置哦*/    list-style-position:inside;}dl{    width:600px;/*如果不设置，这个dl的宽度就会和浏览器的宽度相同*/    border:#666 solid 1px;}dt{    /*width:300px;*//*在这里最好不要设置宽度，还有dd的位置，*//*要不然 会出现问题，可以自己试试（实验的时候加上背景颜色看的更清楚）*/    background-color:#CCC;    float:left;}dd{    background-color:#0CC;    text-align:right;/*保证dd中的内容显示在右边*/}#ul-test2{    width:600px;    border:dashed #666666 1px;    padding-left:0;}#ul-test2 li{    list-style-type: none;    list-style-image: none;    background-image:url(8232.png);/*这种方式设置可以适应更多情况，但是比较麻烦，*//*可以自己研究一下，百度查的这能解决ie中list-style-image无效*//*（但是，我的ie很坑，background-image一直没用，大家可以试试啊，不好意思）*/    background-repeat: no-repeat;    background-position:left center;    padding-left: 30px;}</style></head><body><ul id="ul-test"><li>这是ul的测试</li><li>这是ul的测试</li><li>这是ul的测试</li><li>这是ul的测试</li></ul><ol id="ol-test"><li>这是ol的测试</li><li>这是ol的测试</li><li>这是ol的测试</li><li>这是ol的测试</li></ol><dl><dt>这是第一篇文章这是第一篇文章这是第一篇文章这是第一篇文章</dt><dd>这里显示时间</dd><dt>这是第二篇文章</dt><dd>这里显示时间</dd><dt>这是第三篇文章</dt><dd>这里显示时间</dd></dl><ul id="ul-test2"><li>通过background-image实现的图标</li><li>通过background-image实现的图标</li><li>通过background-image实现的图标</li><li>通过background-image实现的图标</li></ul></body></html>
0 0