页面浮动元素由子元素撑开且水平居中_js 子元素撑开-优快云博客

本文链接：https://blog.youkuaiyun.com/o11111123456l/article/details/54315623

本文介绍了一种利用CSS实现页面浮动元素水平居中的方法，通过特定的布局设置确保了列表项能够在不同屏幕尺寸下保持良好的居中效果。此外，还提供了一个使用jQuery动态调整宽度的示例，以适应窗口大小的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

			
<!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>