CSS 浮动实例。为了兼容，浮动元素放在所在行的最前面

来源：互联网发布：开淘宝怎么进货编辑：程序博客网时间：2024/05/21 14:41
<!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>  <title> new document </title>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  <meta name="author" content="" />  <meta name="keywords" content="" />  <meta name="description" content="" />  <link rel="stylesheet" type="text/css" href="" />  <style type="text/css"> .box{ width:500px;margin:0 auto;}.news{ width:500px; border:1px solid green;} .title{ font-size:24px;width:500px;border:1px solid green; height:45px; background:green; line-height:45px; } .title span{float:right;font-size:16px;}    /* float:right; "more>>"浮动右边 */ .news ul li{ height:30px; line-height:30px; border-bottom:1px dashed #ccc; width:420px;} .news li a:link,.news li a:visited{color:#ccc; text-decoration:none;} .news li a:hover{ color:red; text-decoration:none;} .time{ float:right;}      /* float:right; "2015/11/7"浮动右边 */  </style> </head> <body> <div class="box"><div class="title"><span>more>></span>新闻中心</div>  <!--为了兼容不同浏览器，需要将浮动的元素放到所在行的最前面。否则ie6中，浮动元素会被同一行兄弟元素挤到下边一行--><div style="clear:both;"></div><div class="news"><ul><li><span class="time">2015/11/7</span><a href="#">长春供暖:以为谁家着火了</a></li><li><span class="time">2015/11/7</span><a href="#">广州去年2入未说明</a></li><li><span class="time">2015/11/7</span><a href="#">广州去年他收入未说明</a></li><li><span class="time">2015/11/7</span><a href="#">年内5次贷可省17万</a></li><li><span class="time">2015/11/7</span><a href="#">台湾太平占岛礁</a></li><li><span class="time">2015/11/7</span><a href="#">解放军部队自研软件</a></li><li><span class="time">2015/11/7</span><a href="#">其他收入未说明</a></li></ul>  </div>  </div> </body></html>
阅读全文
0 0