<!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/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#pagelist{
border:4px solid #ccc
padding:10px
width:530px
font-size:12px
list-style-type:none
float:right
}
#pagelist li{
width:530px
height:30px
border-bottom:1px dashed #CCCCCC
margin:0px
padding:0px
/*background:#99FFCC*/
}
#pagelist li a .lbt{
display:block
width:433px
float:left
line-height:30px
text-indent:5px
text-decoration:none
white-space:nowrap /*强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象*/
text-overflow:ellipsis /*当对象内文本溢出时显示省略标记(...)*/
overflow:hidden
display:inline
}
#pagelist li a .ldt{
display:block
width:75px
float:right
text-align:center
line-height:30px
color:#069
text-decoration:none
display:inline
}
#pagelist li a{
width:530px
height:30px
display:block
color:#666
text-decoration:none
cursor:hand
}
#pagelist li a:hover{
color:#03c
text-decoration:none
border-bottom:1px dashed #000000
}
#pagelist li a:hover #com{
display:block
float:left
width:0px
height:0px
margin:4px 0 4px 6px
border-bottom:8px solid #FFFFFF
border-left:8px solid #FF0000
border-top:8px solid #FFFFFF
}
#pagelist li a:hover .ldt{
color:#000
}
</style>
</head>
<body>
<ul id="pagelist">
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span id="com"></span><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
</ul>
</body>
</html>
这可以用table做出来的， 你可以看一下别人的网站源码（右键单击）。建一个table
<table width='568' border='0' cellpadding='0' cellspacing='0'>
<tr><!--一行文字的标签是tr-->
<td width='257' height='19'>新闻公告</td><td width='57' height='19'>21/03/2012</td><!--td代表同一行的格数-->
</tr>
<tr>
。。。
</tr>
</table>
这样保证你的文字是对齐的，tr定义一个css 比如width='257' height='19'代表你想要的宽度和高度
table border='0' 就看不到表格的边线了，剩下的是其他各种优化美观的css，你可以去
www.w3school.com.cn看看他们的css和html例子，很简单但是很有帮助
