兼容IE6的标题和时间左右错开的新闻列表css样式教程_Div+Css_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

兼容IE6的标题和时间左右错开的新闻列表css样式教程

来源：未知作者：类型：图文教程点击次数：发布时间：2014-03-28 16:57:41

先看下效果(兼容IE6，当然css3的圆角和投影没有。)：

运行下面的代码查看效果：

<!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=utf-8" /> <title>兼容IE6的标题和时间左右错开的新闻列表css样式教程 - 我爱模板网</title> </head> <body> <style> div{width:600px; padding:10px; margin:50px auto; border:1px solid #333; border-radius:3px; box-shadow:5px 5px 5px #888;} ul,li{margin:0; padding:0; list-style-type:none; font-size:14px;} em{font-style:normal;} li{margin-top:5px; background:url(http://www.5imoban.net/tpl/images/index_texiao_list_ico.jpg) no-repeat left center; padding-left:20px; overflow:hidden; _zoom:1;} a{font-size:14px; color:#06F; text-decoration:none;} a:hover{color:#F00;} h2{font-family:"微软雅黑","黑体","宋体";} .list1 li{text-align:right;} .list1 li a{float:left; display:inline;} .list2 li{text-align:right;} .list2 li a{float:left; display:inline;} </style> <div> <h2>时间外面没有套标签</h2> <ul class="list1"> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2013/1214/33.html">韩国粉色婚庆公司PSD网站模版</a>[2014-02-11]</li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2013/1214/34.html">韩国绿色企业网站PSD模版</a>[2014-02-12]</li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2013/1231/95.html">深蓝色韩语版装潢公司企业站PSD模板</a>[2014-02-13]</li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0127/172.html">韩国建筑规划公司网站PSD模板和FLA源文件下载</a>[2014-02-14]</li> <li><a href="http://www.5imoban.net/PSDmoban/hangye/2013/1230/84.html">银灰色质感电影网站首页psd模板</a>[2014-02-15]</li> </ul> <h2>时间被em套起来了</h2> <ul class="list2"> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2013/1214/33.html">韩国粉色婚庆公司PSD网站模版</a><em>[2014-02-11]</em></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2013/1214/34.html">韩国绿色企业网站PSD模版</a><em>[2014-02-12]</em></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2013/1231/95.html">深蓝色韩语版装潢公司企业站PSD模板</a><em>[2014-02-13]</em></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0127/172.html">韩国建筑规划公司网站PSD模板和FLA源文件下载</a><em>[2014-02-14]</em></li> <li><a href="http://www.5imoban.net/PSDmoban/hangye/2013/1230/84.html">银灰色质感电影网站首页psd模板</a><em>[2014-02-15]</em></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

第一个列表的li里面有个a标签，第二个列表里面标题在a里面，时间在em里面，道理都一样。
首先：让li里面的内容，不管是a链接的标题还是时间还是包含时间的em都左(右)对其，及li{text-align:left;}（li{text-align:left;}）
其次：让a左浮动(em右浮动)，即a{float:left}（em{float:right}）
有人肯定会提出疑问，为什么不让a左浮动，em右浮动呢？这样做，在有些情况下，IE6情况下会出现，a和它对应的时间em会不在一行。切记！