前端第6款：CSS图片带文字横向列表

描述：图片横向列表，很简单了，其实就是把图片float:left让他们居左，然后再把它们分块居中就可以了。你不想写代码？那把它们复制下来就可以了！

HTML代码：

<ul id="products">
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
	<li><a href="#"><img src="pic.jpg" alt="" width="100" height="75"/></a><span><a href="#">美丽的图片</a></span></li>
</ul>

CSS代码：

#products {width:560px;margin:50px auto;}
#products li {width:110px;height:130px;float:left;margin-left:30px;display:inline;}
#products li a {display:block;}
#products li a img {border:1px solid #666;padding:1px;}
#products li span a {width:110px;height:30px;line-height:24px;text-align:center;white-space:nowrap;text-overflow:ellipsis; overflow: hidden;}