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

<div class="four">
<h2>电子商务</h2>
<img src="images/photo2.gif" alt="" />
<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>

 1  

 2 

 3 .four {

 4 width: 336px;

 5 height: 200px;

 6 background: #eee;

 7 float: left;

 8 margin: 5px;

 9 }

10 

11 .four img {

12 height:120px;

13 float: left;

14 margin-left:10px;

15 padding:6px;

16 background:darkgray;

17 }

18 

19 .four ul { 

20 float: left;

21 }

22 

23 .four li {

24 background:url(./images/black.png) center left no-repeat ;

25 height:15px;

26 margin:10px;

27 background-size:3px;

28 padding-left:10px;

29 font:12px/15px "黑体";

30 

31 }

32 

33 .four a {

34 }

35 

36 .four a:visited {

37 color:gray;

38 }

39 

40 .four h2 {

41 margin:6px 0 6px 10px;

42 font-size:16px;

43 }

44 

45  

View Code

 

<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>

 

 1 #art {

 2 background:#EEE;

 3 margin-top:3px;

 4 padding-top:10px;

 5 }

 6 

 7 #art li {

 8 height:30px;

 9 /*border:1px green solid;*/

10 }

11 

12 #art a {

13 margin-left:5px;

14 display:block;

15 background:url(./images/Art_li.png) no-repeat left;

16 background-size:5px;

17 height:30px;

18 padding-left:20px;

19 font:16px/30px "simsum";

20 

21 }

22 

23 #art a:hover {

24 background:url(./images/7.jpg);

25 /*background:url(./images/33.png) no-repeat left ;*/

26 text-decoration:none;

27 }

View Code

火狐浏览器用的是li的高度，IE可以直接设a标签的高度

<div id="header">
<img src="images/logo.png" id="logo"/>
<ul id="nav">
<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>
<li><a href="#">导航6</a></li>
<li><a href="#">导航7</a></li>

</ul>
</div>

 

 1 #header {

 2     height: 192px;

 3     background: darkgray url(images/header3.jpeg) no-repeat;

 4 }

 5 

 6 

 7 

 8 #nav li {

 9     background: #F0F8FF;

10     width: 90px;

11     margin: 1px;

12     float: left;

13     height:37px;

14     //border:1px red solid;

15     line-height: 37px;

16 }

17 

18 #nav a {

19     /*font-size: 15px;*/

20     /*line-height: 37px;*/

21     font:15px/37px '黑体' sans-serif;

22     color: darkgray;

23     display: block;

24     width: 90px;

25     text-align: center;

26     color: #363636;

27 }

28 

29     #nav a:hover {

30         color: white;

31         background-color: orange;

32     }

View Code