<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<style type="text/css">
*{ margin:0; padding:0; font:12px/1.5 arial; list-style:none;}
.comment{ width:400px; margin-left:200px; background-color:#0ff;}
.children .comment{ margin-left:50px; width:auto; background-color:#ff0;}
.comment-body{ position:relative; padding-bottom:80px;}
.comment-author{ position:absolute; top:0; left:-200px;}
.comment-author:after{ content:""; position:absolute; top:5px; left:50px; display:block; width:150px; height:8px; background:#f0f;}/*为毛不用标签实现什么什么环境使用呢*/
.comment-meta{ position:absolute; top:20px; left:-200px;}
</style>
<ol class="commentlist">
    <li class="comment">
        <div class="comment-body">
            <div class="comment-author">Philipp Schmitt</div>
            <div class="comment-meta">10/26/2009</div>
            <p>The Facebook Sprite. Everything in one place ;)</p>
        </div>
        <ul class="children">
            <li class="comment">
                <div class="comment-body">
                    <div class="comment-author">Philipp Schmitt</div>
                    <div class="comment-meta">10/26/2009</div>
                    <p>The Facebook Sprite. Everything in one place ;)</p>
                </div>
            </li>
        </ul>
    </li>
</ol>
</body>
</html>