<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>豆瓣</title>
<style type="text/css">
* {
margin:0
padding:0
font-size:12px
list-style-type:none
text-decoration:none
}
body {
background:#fffmargin:0px auto
}
#wrapper{
width:950px
margin:10px auto
}
ul#show_list{
width:320px
display:inline
overflow:hidden
}
ul#show_list li{
float:left
margin-bottom: 7px
padding: 0 0 7px
/*border:1px solid red*/
}
ul#show_list li a{
display:block
width:320px
height:29px
border-bottom:1px dashed #ddd
line-height:29px
text-indent:3px
color: #336699
overflow:hidden
float:left
/*border:1px solid red*/
height:28px
line-height:28px
}
ul#show_list li div.up, ul#show_list li div.down, ul#show_list li div.stay {
color: #999999
float:right
display:inline
overflow:hidden
font-size: 9px
padding-left: 15px
width: 20px
/* border:1px solid red*/
height:28px
line-height:28px
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="show_list">
<li class="clearfix"><a href="#">1 皮娜</a><div class="up">1</div></li>
<li><a href="#">2 疯狂愚蠢爱</a><div class="up">9</div></li>
<li><a href="#">3 阳光姐妹淘</a><div class="down">2</div></li>
<li><a href="#">4 亡命驾驶</a><div class="up">4</div></li>
<li><a href="#">5 盲</a><div class="up">6</div></li>
<li><a href="#">6 高迪战</a><div class="up">5</div></li>
<li><a href="#">7 深藏不露</a><div class="up">4</div></li>
<li><a href="#">8 忧郁症</a><div class="down">1</div></li>
<li><a href="#">9 一夜迷情</a><div class="up">2</div></li>
<li><a href="#">10 死亡实验</a><div class="up">1</div></li>
</ul>
</div>
</body>
</html>
笔者在这里的几个问题可以简单滴说一下偶滴个人意见
1.关键a标签
a默认的为行内标签，即是默认的状态下的下一个节点不会换行，可是当在a的属性中添加了display：block后它有行内标签变成了块标签。这也是为什么其后面的页码跑到了下一行。
当在a中添加float：left，而其后紧跟的兄弟节点添入float：right后，他们就能在一行了。
2，关于a标签中的文字，与div中的文字虽然在一行，但仍没有对应的问题。
在这里将a的高度与div的高度设相同，然后将文字行高与高度相同，他们就能够对齐且上下居中显示了。height:28pxline-height:28px
代码表示方法：.stagepad{scrollbar-face-color: #E100E1
scrollbar-shadow-color: maroon
scrollbar-highlight-color: white
scrollbar-3dlight-color: #E100E1
scrollbar-darkshadow-color:#E100E1
scrollbar-arrow-color:#E100E1
scrollbar-base-color: #E100E1
scrollbar-track-color: #E100E1
overflow-y:autoheight:1000px
filter: chroma(color=#E100E1)}
-------------------------------------
演示地址：http://hi.baidu.com/wsoufo/blog/item/2b2996cdc1f4011900e92848.html
<style>
.item{font-size:12pxwidth:260px}
.item:after{height:0content:''display:blockvisibility:hiddenclear:both}
.list-item{background:url(小列表图片地址) left center no-repeatpadding-left:25pxheight:24pxline-height:24pxcolor:#6d7174width:180px}
.list-date{float:rightheight:24pxline-height:24pxcolor:#ba333a}
</style>
<div class="item">
<div class="list-item">白宫发表声明称 奥巴马总统将</div>
<div class="list-date">04-17</div>
</div>
<div class="item">
<div class="list-item">[多图]如果你能站上去 - WAVEp</div>
<div class="list-date">04-17</div>
</div>
效果如图所示：
如果觉得间隔有些大，可以减少item的宽度为255，注意list-item中的url为列表小图片相对于此文件的地址。
