css li中span实现日期靠右对齐的案例

发布时间:2019-08-08编辑:脚本学堂
网页中经常见到一部分列表中的日期是靠右对齐的,这种效果是如何实现的呢?本文就举一具体例子来给大家分享,希望可以给您带来帮助。

具体例子如下:
 

复制代码 代码示例:

<!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教程 li span日期靠右排列实例</title>
<style>
.artlist{height:100%; overflow:hidden; margin:10px;}
.artlist ul{ margin:0px;}
.artlist ul li{ list-style:none;line-height:28px;}
.artlist ul li span{ float:right;padding-right:10px;}
.artlist ul li a{ color:#333;}

</style>
</head>

<body>
 <table width="98%" border="0" class="artbody">
    <tr>
      <td >
     <div class="artlist">
      <ul>
         <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
            <li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>

        </ul>
     </div>
     </td>
    </tr>
  </table>
</body>
</html>