不使用float实现一行多列

在页面布局的时候经常会出现类似这样的列表

这是时候使用float来达到效果容易引起一些浮动没有清理带来的不兼容性问题，其次用float来做比较麻烦，代码也不好看。

这里记录一下自己的处理方法，具体代码如下：

<style type="text/css">
body{ font-size:12px; font-family:'宋体';}
ul{ padding:0; margin:0; list-style:none;}
a{ text-decoration:none;}

.top_no {
    position: absolute;
    left: 5px;
    top: 0;
    FONT-SIZE: 12px;
    WIDTH: 18px; 
    height:25px; 
    line-height:25px;
    TEXT-ALIGN: center; color:#FFFFFF;
    background-repeat: no-repeat; background:url(../images/zj.jpg) no-repeat center;
}

.top_title{
    display:block; 
    width:120px; 
    overflow:hidden;
    padding-left:25px;
    padding-right:90px; 
    position:relative; 
    margin:0 auto;
    height:25px; 
    line-height:25px;
}

.top_title a{
    color:#000000;
}

.top_date{
    position:absolute;
    height:25px; 
    line-height:25px;
    right: 5px; 
    color:#666666;
    top: 0;
}
</style>
<div style="width:241px;">
<ul class="top_list">
    <li class="top_title">
        <span class="top_no">1</span>
        <A href="/v/huigugongkaike/16.html" target=_blank>新高后该重仓何品种？</A>
        <span class="top_date">
            2012-05-08
        </span>
    </li>
    <li class="top_title">
        <span class="top_no">2</span>
        <A href="/v/huigugongkaike/16.html" target=_blank>新高后该重仓何品种？</A>
        <span class="top_date">
            2012-05-08
        </span>
    </li>
</ul>
</div>

这里再说下思路：

核心属性

position:relative;

在这里并不是真正的实现一行多列，而是通过绝对定位来覆盖，达到看上去一行多列的效果，首先设置li

position:relative;
display:block; 



然后设置其子元素span


position: absolute;
这样子元素就可以相对父元素实现绝对定位

在这里我没设置父元素li的padding值，目的是让文章标题的长度在一定的范围内，不会被后面的日期覆盖，一般左右的padding值为你左右要放信息的长度加他们之间的间隔信息，这里则是 日期的长度和前面图标的长度。