- HTML code
<!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/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css" > .zhanshi_list{ width:987px; background-color:#FF0; margin:0 auto; } .list{ line-height:20px; overflow:hidden; list-style-image:none; list-style-type:none; padding:0;} .list li{ float:left; list-style-type:none; text-align:center; overflow:hidden; margin-right:15px; display:inline; width:180px; } .list li img{ margin-top:10px; width:178px; height:270px; border:1px solid #06F; } .list li.lastProduct{ margin:0;} .list li a{ color:#666; font-size:12px; font-weight:normal; text-decoration:none;} </style> </head> <body> <div class="zhanshi_list"> <ul class="list"> <li><img src="maiku/imgs/BLB01607_big--w_180_h_270.jpg"/><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00 <br />¥235.00</a></li> <li class="lastProduct"><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br /> <a href="#">条纹防皱斜插修身休闲西裤<br />零售价:¥360.00<br />¥235.00</a></li> </ul> </div> </body> </html>
在显示的列表里面右边有很大的空白,怎么才能让左右的空白显示一样呢。就是把列表居中:
------解决方案--------------------
图挂了。。。你这个本来就居中了啊。。。
------解决方案--------------------
http://hi.csdn.net/space-9866978-do-album-picid-1011662.html
这就是我截的整个图。。。2边都一样的啊
------解决方案--------------------
你只要给ul一个宽度,稍微比li本身以及li的margin宽一点无所谓,然后用margin: 0 auto;就行了.
------解决方案--------------------
这个和浏览器也有关的有时,我上次做了个 ,就出现了有的居中 有的不居中的状况。建议试试。
------解决方案--------------------
body:text-align:center; {在整个body上加上这样的一句代码 就整个页面居中了}
------解决方案--------------------