用CSS写怎样才能控制Li里面的文字排成这样 如图

html-css012

用CSS写怎样才能控制Li里面的文字排成这样 如图,第1张

设置li标签的宽度，然后在每个li里设他们的padding-left（内边距） 这是我能想到最简单的办法了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

li{list-style:none

line-height:2em

text-decoration:none

width:200px

}

</style>

</head>

<body>

<ul style="text-indent:2em">

<li style="padding-left:0px">just simple</li>

<li style="padding-left:20px">just simple</li>

<li style="padding-left:40px">just simple</li>

<li style="padding-left:60px">just simple</li>

<li style="padding-left:40px">just simple</li>

<li style="padding-left:20px">just simple</li>

<li style="padding-left:0px">just simple</li>

</ul>

</body>

</html>

这是全部的代码 样式跟你的一样 字体自己改吧

1、将li的height和line-height设置成为和设计稿一样的

2、将列表图标整体切出来，铺在ul上，不平铺

3、使用background-position控制ul背景和li中的文字对齐即可。