码迷,mamicode.com
首页 > Web开发 > 详细

css浮动居中实现2

时间:2016-05-23 17:20:56      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}

.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix { zoom:1; }
.wrap{
margin: 20px auto;
padding: 10px;
background: #FF2F2F;
overflow: hidden;
}
.content{
float: left;
position: relative;
left:50%;
}
ul{
position: relative;
left:-50%;
float: left;
}
ul li{
list-style: none;
float: left;
margin: 2px 5px;
}
ul li a{
display: block;
padding: 2px 5px;
background: #FFFFFF;
}
</style>
</head>
<body>
<div class="clearFix wrap">
<div class="content">
<ul>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</div>
</body>
</html>

css浮动居中实现2

标签:

原文地址:http://www.cnblogs.com/garyzhijiang/p/5520464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!