固定列表布局

最新推荐文章于 2021-07-02 17:50:58 发布

bing_JavaScript

最新推荐文章于 2021-07-02 17:50:58 发布

阅读量338

点赞数

本文链接：https://blog.csdn.net/bing_JavaScript/article/details/52171718

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.block{
margin: 0 auto;
margin-top:20px;
width: 318px;
line-height: 20px;
border: 1px solid #fc9;
}
.block ol{
padding-left: 23px;
width: 14em; /*固定标题列表宽度*/
background: url(http://p6.qhimg.com/t0123fede0a5c219b8b.png) no-repeat 2px 4px;
}
.block li{
clear: both;
margin: 0;
padding: 0;
list-style: none outside none;
}
.block li a{
float:left;
_display:inline;/*兼容ie6*/
max-width: 14em;/*为应用text-overflow做准备，固定宽度*/
white-space: nowrap;
_white-space:norama;/*超长就换行，第二行被裁掉 @ie*/
_height:20px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
color:#333;
_background:transparent;

}
.block li span{
_position:relative;
float: left;
_display:inline;
margin-right:-99px;
padding-left:10px;
font-size:10px;
color:#999;
}
</style>
</head>
<body>
<div class="block">
<h3>最新博文</h3>
<ol>
<li><a href="#">如何和合适使用css的important</a>
<span>2013-02-01</span></li>
<li><a href="#">如何和合适使用css的important</a>
<span>2013-02-01</span></li>
<li><a href="#">如何和合适使用css的important</a>
<span>2013-02-01</span></li>
<li><a href="#">如何和合适使用css的important</a>
<span>2013-02-01</span></li>
<li><a href="#">如何和合适使用css的important</a>
<span>2013-02-01</span></li>
<li><a href="#">如何和合适使用css的important</a>
<span>2013-02-01</span></li>
</ol>
</div>
</body>
</html>

bing_JavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定列表布局

.block{ margin: 0 auto; margin-top:20px; width: 318px; line-height: 20px; border: 1px solid #fc9; } .block ol{
复制链接

扫一扫