关于html中li的问题

最新推荐文章于 2025-03-09 23:42:16 发布

doudou_demo

最新推荐文章于 2025-03-09 23:42:16 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/doudou_demo/article/details/47912849

html+css 专栏收录该内容

6 篇文章

订阅专栏

关于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>