固定列表布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        .block{
            margin: 0 auto;
            margin-top:20px;
            width: 318px;
            line-height: 20px;
            border: 1px solid #fc9;
        }
        .block ol{
            padding-left: 23px;
            width: 14em; /*固定标题列表宽度*/
            background: url(http://p6.qhimg.com/t0123fede0a5c219b8b.png) no-repeat 2px 4px;
         }
        .block li{
            clear: both;
            margin: 0;
            padding: 0;
            list-style: none outside none;
        }
        .block li a{
            float:left;
            _display:inline;/*兼容ie6*/
            max-width: 14em;/*为应用text-overflow做准备，固定宽度*/
            white-space: nowrap;
            _white-space:norama;/*超长就换行，第二行被裁掉 @ie*/
            _height:20px;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
            color:#333;
            _background:transparent;


        }
        .block li span{
            _position:relative;
            float: left;
            _display:inline;
            margin-right:-99px;
            padding-left:10px;
            font-size:10px;
            color:#999;
        }
    </style>
</head>
<body>
<div class="block">
    <h3>最新博文</h3>
    <ol>
        <li><a href="#">如何和合适使用css的important</a>
            <span>2013-02-01</span></li>
        <li><a href="#">如何和合适使用css的important</a>
            <span>2013-02-01</span></li>
        <li><a href="#">如何和合适使用css的important</a>
            <span>2013-02-01</span></li>
        <li><a href="#">如何和合适使用css的important</a>
            <span>2013-02-01</span></li>
        <li><a href="#">如何和合适使用css的important</a>
            <span>2013-02-01</span></li>
        <li><a href="#">如何和合适使用css的important</a>
            <span>2013-02-01</span></li>
    </ol>
</div>
</body>
</html>