CSS ul li a 背景图与文字对齐

<div class="four">
<h2>电子商务</h2>
<img src="images/photo2.gif" />
<ul>
<li><a href="#">方便的订单管理1</a></li>
<li><a href="#">方便的订单管理2</a></li>
<li><a href="#">方便的订单管理3</a></li>
<li><a href="#">方便的订单管理4</a></li>
<li><a href="#">方便的订单管理5</a></li>
</ul>
</div>

.four {
width: 336px;
height: 200px;
background: #eee;
float: left;
margin: 5px;
}

.four img {
height:120px;
float: left;
margin-left:10px;
padding:6px;
background:darkgray;
}

.four ul {
float: left;
}

.four li {
background:url(./images/black.png) center left no-repeat ;
height:15px;
margin:10px;
background-size:3px;
padding-left:10px;
font:12px/15px "黑体";

}

.four a {
}

.four a:visited {
color:gray;
}

.four h2 {
margin:6px 0 6px 10px;
font-size:16px;
}

<div>
<ul id="art">
<li><a href="#">文章1</a></li>
<li><a href="#">文章1</a></li>
<li><a href="#">文章1</a></li>
<li><a href="#">文章1</a></li>
<li><a href="#">文章1</a></li>
<li><a href="#">文章1</a></li>
<li><a href="#">文章1</a></li>
</ul>
</div>

#art {
background:#EEE;
margin-top:3px;
padding-top:10px;
}

#art li {
height:30px;
/*border:1px green solid;*/
}

#art a {
margin-left:5px;
display:block;
background:url(./images/Art_li.png) no-repeat left;
background-size:5px;
height:30px;
padding-left:20px;
font:16px/30px "simsum";

}

#art a:hover {
background:url(./images/7.jpg);
/*background:url(./images/33.png) no-repeat left ;*/
text-decoration:none;
}