字体下沉问题

Question

.left_in span{

display: inline-block;

background: url(imgs/left1.png) no-repeat center; 

height:33px;

width:25px;

margin-right: 20px;

}

.left_in h2{

background: url(imgs/left_title2.png) no-repeat center right;

color: #ffffff;

font-size: 14px;

width:206px;

height: 33px;

border:1px solid red;

line-height: 33px;

border-bottom: 1px dotted #CBCBCB;

}

.left_in ul{

margin:0 3px 0 3px;

} 

.left_in ul li{

border-bottom: 1px dotted #CBCBCB;

width:199px;

height:22px;

line-height: 22px; 

}

.left_in ul li span{

width:15px;

height:22px;

background: url(imgs/icon4.png) no-repeat center;

}

<div class="left_in">

<h2><span></span>环鹏动态</h2>

<ul>

<li><span></span>乌鲁木齐环鹏有限公司...</li>

<li><span></span>乌鲁木齐环鹏有限公司...</li>

<li><span></span>乌鲁木齐环鹏有限公司...</li>

<li><span></span>乌鲁木齐环鹏有限公司...</li>

<li><span></span>乌鲁木齐环鹏有限公司...</li>

<li><span></span>乌鲁木齐环鹏有限公司...</li>

<li><span></span>乌鲁木齐环鹏有限公司...</li>

</ul>

</div>

不知道什么原因，设置line-height后字的显示还是没有效果，不知是哪里的问题，求大牛指导。

Answer 1

你没有浮动，所以文本没有和图标并列，而是向下推了一行。给你的span加一个float:left试试。希望能帮到你，望采纳！

Answer 2

margin-top：-20px只是举个例子具体多少自己试着来

Answer 3

把height 属性去了。只留line-height