<!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>