有关块与内联元素的心得(内联元素右对齐)

未改代码:

目的:将日期右对齐,但下面的代码,把含日期内联元素<span>转为块元素,再让其向右浮动,但结果显得为错位显示.未能达到预期目的.

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#css01{360px;height:300px;text-align : left; float:left;margin-right:10px;margin-top:10px;}
#css02{1024px;height:100px;text-align : left; float:left;}
.css011{360px;height:300px;border:1px solid #5F868C ;}
.css0111{360px;height:30px;float:left;background-image: url("mid_bg2.gif");background-repeat: repeat-x;}
li span.globalDate {float: right;margin: 0 2px;}

</style>
</HEAD>

<BODY>
<div id="css02"><ul class="css011"><span class="css0111">ee</span><li class="showlistB1"><·[<a href="/article/list.asp?classid=17">CSS专题</a>] <a href="/article/show.asp?id=117" title="使用CSS处理表格边框样式化687887">使用CSS处</a><span class="oldDate globalDate">02-26</span></li>
<li class="showlistB2">·[<a href="/article/list.asp?classid=17">CSS专题</a>] <a href="/article/show.asp?id=116" title="使用CSS处理表格边框样式化67677">使用CSS</a><span class="oldDate globalDate">02-26</span></li>
</div>
</BODY>
</HTML>

代码更改后:

目的:将日期右对齐,但下面的代码,把含日期的内联元素<span>转为块元素,并把把含日期的内联元素<span>置前,再让其向右浮动,结果显得为正常能达到预期目的.

</style>
</HEAD>

<BODY>
<div id="css02"><ul class="css011"><span class="css0111">ee</span><li class="showlistB1"><span class="oldDate globalDate">02-26</span>·[<a href="/article/list.asp?classid=17">CSS专题</a>] <a href="/article/show.asp?id=117" title="使用CSS处理表格边框样式化687887">使用CSS处</a></li>
<li class="showlistB2"><span class="oldDate globalDate">02-26</span>·[<a href="/article/list.asp?classid=17">CSS专题</a>] <a href="/article/show.asp?id=116" title="使用CSS处理表格边框样式化67677">使用CSS</a></li>
</div>
</BODY>
</HTML>