最新消息:

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

前端模块 杨红伟 1712浏览 0评论

描述:图片横向列表,很简单了,其实就是把图片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;}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址