需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{
border: 1px solid blue
width: 300px
text-align: justify
}
div:after {
display: inline-block
width: 100%
content: ''
}
3、浏览器运行index.html页面，此时一行内的文字实现了两端对齐。
1、将li的height和line-height设置成为和设计稿一样的2、将列表图标整体切出来，铺在ul上，不平铺
3、使用background-position控制ul背景和li中的文字对齐即可。
这里给你解释一下 <p>也算是一个容器，什么叫容器，比如罐子，碗，等，可以在里面放东西的都属于容器 而<img>不是容器，只是显示反映图片 <p style="text-align:left" 为什么写在<p>里面，举例说明，一个纸盒子，我里面放个球，那么我想把球放到中间，那么你说，我的操作是对于哪个而言呢？ 这个中间，肯定是对应于纸盒子，而非球 所以，这里的style 是写在p里面 而不是 img 至于style="vertical-align我也不大清楚，你可以去百度查一下这个属性的意思。
