邪罗刹的菠萝阁

> 最近想在博客联盟的首页实现如图的效果，所以折腾了一番代码。
> 我放在下面共享一下。呵呵，有兴趣的童鞋可以研究研究喔。

> 这一部分是Html示例代码：

<li><div class="avatar">
<img src="evlos_48.jpg" />
</div><p>Name</p></li>

> 这一部分是CSS代码：

li {
list-style: none; float: left; padding-left: 8px; padding-right: 8px;
width: 60px; overflow: hidden;
}
.avatar {
padding: 5px 0 0 5px; width: 55px; height: 55px;
}
p {
width: 100%;  height: 15px; line-height: 12px; text-align: center;
white-space: nowrap; overflow: hidden;
}