How to create a news list in webpage layout using DIV + CSS

CSS code:

The code is as follows:

Copy 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; /* Dotted line at the bottom of the list */ Width: 100%; } . List li { Color: #777777; Display: block; Padding: 6px 0px 4px 15px; Background: url (/news/images/dot.gif) no-repeat 0 6px; /* Arrows on the left of the list */ } . List li span { Float: right;/* float the span element to the right */ Text-align: right;/* right-aligned date */ } . List li a: hover { Color: #336699; Background: url (/news/images/dot2.gif) repeat-x bottom; }

Note: The span must be placed in front. Otherwise, a line break is generated.
XHTML:

The code is as follows:	Copy code
<Ul class = "list"> <Li> <span> August 1, May 30, 2005 </span> <a href = "#"> News title 01 </a> </li> <Li> <span> March May 30, 2005 </span> <a href = "#"> News title 02 </a> </li> <Li> <span> March May 30, 2005 </span> <a href = "#"> News title 03 </a> </li> <Li> <span> March May 30, 2005 </span> <a href = "#"> News title 04 </a> </li> </Ul>