DIV内的UL元素如何居中显示

2012-03-24

DIV内的UL元素怎么居中显示HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN h

DIV内的UL元素怎么居中显示

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上加上这样的一句代码就整个页面居中了}
------解决方案--------------------

你看一下你的代码
li标签样式里有marign-right:15px
这样右边当然有大的空白啊
[解决办法]

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" >*{padding:0px;margin:0;}.zhanshi_list{ width:980px; 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:0 8px; display:inline; width:180px;   }.list li img{ margin-top:10px;  width:178px; height:270px; border:1px solid #06F; }.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>

热点排行

CSS

DIV内的UL元素如何居中显示