How to make news list in div+css typesetting _css/html

CSS code:

. list{
 margin:0px 10px 20px;
 Text-align:left 
}

. List ul{
 list-style-type:none;
 margin:0px;
 padding:0px
}

. List li{
 background:url (/news/images/line.gif) Repeat-x bottom; 
 /* The dotted line at the bottom of the list *
 /width:100%;

List Li a{
 color: #777777;
 Display:block;
 padding:6px 0px 4px 15px;
 Background:url (/news/images/dot.gif) no-repeat 0 6px;
 /* The arrow picture on the left of the list/
}

. list Li span{
 float:right;/* to float the span element to the right * * *
 text-align:right;/* Date Align * * *

list li a:hover{
 color: #336699;
 Background:url (/news/images/dot2.gif) Repeat-x bottom;
}
  

Note: span must be placed in front, and vice versa will result in line wrapping

<ul class= "List" >
<li><span>2005 Year May 30 </span><a href= "#" > News headlines 01</a></ Li>
<li><span>2005 Year May 30 </span><a href= "#" > News title 02</a></li>
< Li><span>2005 year May 30 </span><a href= "#" > News title 03</a></li>
<li><span >2005 year May 30 </span><a href= "#" > News title 04</a></li>
</ul>