bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行

<ul>

<li><a href=“#”>新闻1</a> <span>2012-12-24</span></li>

<li><a href=“#”>新闻1</a> <span>2012-12-24</span></li>

<li><a href=“#”>新闻1</a> <span>2012-12-24</span></li>

<li><a href=“#”>新闻1</a> <span>2012-12-24</span></li>

</ul>

1.

span和a标签交换位置.

<li><span>2012</span><a>新闻</a></li>

缺点:语义结构发生改变,不合逻辑.

2.

a加左浮动,span加右浮动

3.

使用IE hack 在span标签中加入只有IE6,7可以识别的样式

*margin-top:20px;

_margin-top:20px;

说明,使换行的部分根据margin-top再呈现出来.

li {position:relative; width:200px;}

li span{position:absolute; right:0px;}