<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻列表</title> <style type="text/css"> * { margin: 0; padding: 0; } h1 { font-weight: normal; } body { padding: 20px; } li { list-style: none; } a { text-decoration: none; } /*清除浮动*/ .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /*ellipsis*/ .ellipsis { display: block;; white-space: nowrap; /*文本不换行*/ -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; overflow: hidden; /*不允许出现滚动条*/ } /* 自适应新闻列表 左标题右日期 */ .news1 { width: 100%; } .news1 > li > a { padding: 10px 0; display: block } .news1 > li > a:hover { color: red; } .news1 > li > a > .title { float: left; margin-right: -100px; width: 100%; } .news1 > li > a > .title > p { margin-right: 100px; } .news1 > li span { display: block; float: right; text-align: center; width: 80px; } /*自适应新闻列表 左日期右标题*/ .news2 { width: 100%; } .news2 > li > a { padding: 10px 0; display: block; } .news2 > li > a:hover { color: red; } .news2 > li p { font-size: inherit; font-weight: normal; } .news2 > li span { float: left; display: block; text-align: center; width: 100px; } </style> </head> <body> <h1>自适应新闻列表 <small>左标题右日期</small> </h1> <ul class="news1"> <li> <a href="#" class="clearfix"> <div class="title"> <p class="ellipsis">CSS高效开发实战</p> </div> <span>2017-4-2</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="title"> <p class="ellipsis">Web前端开发最佳实践</p> </div> <span>2017-4-2</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="title"> <p class="ellipsis">图解CSS3核心技术与案例实战</p> </div> <span>2017-4-2</span> </a> </li> </ul> <h1>自适应新闻列表 <small>左日期右标题</small> </h1> <ul class="news2"> <li> <a href="#" class="clearfix"> <span>2017-4-2</span> <p class="ellipsis">CSS高效开发实战</p> </a> </li> <li> <a href="#" class="clearfix"> <span>2017-4-2</span> <p class="ellipsis">Web前端开发最佳实践</p> </a> </li> <li> <a href="#" class="clearfix"> <span>2017-4-2</span> <p class="ellipsis">图解CSS3核心技术与案例实战</p> </a> </li> </ul> </body> </html>
兼容 IE7+,火狐,谷歌