页面浮动元素由子元素撑开且水平居中

最新推荐文章于 2024-09-20 14:39:18 发布

jrongweb

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量309

点赞数

文章标签：浮动元素由子元素撑开且水平居中

本文链接：https://blog.csdn.net/o11111123456l/article/details/54315623

版权

			
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
     *{
         margin:0;
         padding:0;
     }
    .clearfix:after {}{ content:""; height:0; visibility:hidden; display:block; clear:both; }  
    .clearfix{ zoom:1; }  
    .wrap{ margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; } 
    .page{ float:left; position:relative;left:50%;}
    .page li{ float:left; position:relative; overflow:hidden; margin:0 150px;right:50%; }
</style>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<div class="wrap clearfix">
    <ul class="page">
        <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="#">4</a> </li>
        <li> <a href="#">2</a> </li>
        <li> <a href="#">下一页</a> </li>
    </ul>
</div>
<script>
    function changewidth(gen){  
        $(gen).width("inherit");
        if($(gen).width()==$(gen).parent().width()){
            var li=$(gen).children();
            var he=0;
            var i=0;
            var firtop=li.eq(0).offset().top;
            while(firtop==li.eq(i).offset().top){
             he+=li.eq(i).width()+parseInt(li.eq(i).css("margin-left"))+parseInt(li.eq(i).css("margin-right"));
             i++;
            }
            $(gen).width(he);
        }
    }
    changewidth(".page");
    window.οnresize=function(){
         changewidth(".page");
    }
</script>
</body>
</html>