<!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>
CSS 浮动实例。为了兼容,浮动元素放在所在行的最前面
最新推荐文章于 2020-11-25 17:36:29 发布