<!DOCTYPE html>
<html>
<head>
<title>列表样式</title>
<meta charset="utf-8"/>
<style type="text/css">
.open{
list-style-image:url("../images/open.png");
}
.close{
list-style-image:url("../images/close.png");
}
.add{
list-style-image:url("../images/add.png");
}
.modify{
list-style-image:url("../images/modify.png");
}
.delete{
list-style-image:url("../images/remove.png");
}
/*先去掉li前面的编号*/
li{
list-style-type:none;
}
/*去掉左侧内边距*/
#list2{
padding-left:0;
}
.open1{
background:url("../images/open.png") no-repeat;
/*用text-indent来控制文字缩进到图片的后面*/
text-indent:25px;
}
.close1{
background:url("../images/close.png") no-repeat;
text-indent:25px;
}
.add1{
background:url("../images/add.png") no-repeat;
text-indent:25px;
}
.modify1{
background:url("../images/modify.png") no-repeat;
text-indent:25px;
}
.delete1{
background:url("../images/remove.png") no-repeat;
text-indent:25px;
}
</style>
</head>
<body>
<h1>列表样式图片--不对齐</h1>
<ul>
<li class="open">
部门管理
<ul>
<li class="add">增加</li>
<li class="modify">修改</li>
<li class="delete">删除</li>
</ul>
</li>
<li class="close">
员工管理
<ul>
<li class="add">增加</li>
<li class="modify">修改</li>
<li class="delete">删除</li>
</ul>
</li>
<li class="close">
资产管理
<ul>
<li class="add">增加</li>
<li class="modify">修改</li>
<li class="delete">删除</li>
</ul>
</li>
</ul>
<h1>列表样式图片--处理方式</h1>
<h2>不使用list-style-image,用background设置为背景</h2>
<ul id="list2">
<li class="open1">
部门管理
<ul>
<li class="add1">增加</li>
<li class="modify1">修改</li>
<li class="delete1">删除</li>
</ul>
</li>
<li class="close1">
员工管理
<ul>
<li class="add1">增加</li>
<li class="modify1">修改</li>
<li class="delete1">删除</li>
</ul>
</li>
<li class="close1">
资产管理
<ul>
<li class="add1">增加</li>
<li class="modify1">修改</li>
<li class="delete1">删除</li>
</ul>
</li>
</ul>
</body>
</html
显示结果如下：
转载请注明原文地址: https://ju.6miu.com/read-670557.html
