CSS布局文章列表左对齐，日期右对齐-CFANZ编程社区

CSS布局文章列表左对齐，日期右对齐

<!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=gb2312" />
 
 

  <title>CSS布局文章列表左对齐，日期右对齐</title>
 
 

  <style type="text/css">
 
 

  .list{
 
 

  margin: 0px 9px 18px;
 
 

  text-align: left;
 
 

  }
 
 

  .list ul{
 
 

  list-style-type: none;
 
 

  margin: 0px;
 
 

  padding: 0px;
 
 

  }
 
 

  .list li{
 
 

  font-size:9pt;
 
 

  width: 100%;
 
 

  }
 
 

  .list li a{
 
 

  color: #0066cc;
 
 

  display: block;
 
 

  padding: 5px 0px 3px 13px;
 
 

  }
 
 

  .list li span{
 
 

  float: right;
 
 

  text-align: right;/*日期右对齐*/
 
 

  }
 
 

  .list li a:hover{
 
 

  color: #003399;
 
 

  }
 
 

  </style>
 
 

  </head>
 
 

  <body>
 
 

  <ul class=list>
 
 

  <li><span>2010年5月4日</span><a href="#" target="_blank">AAAAAAAAAAAAAA</a></li>
 
 

  <li><span>2010年5月4日</span><a href="#" target="_blank">BBBBBBBBBBBBBB</a></li>
 
 

  <li><span>2010年5月4日</span><a href="#" target="_blank">CCCCCCCCCCCC</a></li>
 
 

  </ul>
 
 

  </body>
 
 

  </html>

0 条评论