老师 关于页脚的水平居中
来源：2-7 编程练习
慕粉2031048644
2019-07-09 15:19:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;list-style:none;text-decoration:none;}
body{font-family:"微软雅黑";}
a,img{display:block;}
.head{
width:100%;
height:100px;
background-color:black;
position:fixed;
top:0;
}
.logo{float:left;}
.nav{float:right;}
.navhead{overflow:hidden;}
.navhead li{
float:left;
padding:0 20px;
line-height:100px;
text-align:center;
}
li a:link{
color:white;
}
.content{
width:100%;
padding-top:100px;
padding-bottom:100px;
}
.content img{
width:100%;
}
.foot{
width:100%;
height:100px;
position:fixed;
bottom:0;
background-color:black;
}
.navfoot{
overflow:hidden;
padding-left:400px;
}
.navfoot li {
float:left;
padding:0 20px;
line-height:100px;
text-align:center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="head">
<div class="logo">
<a href="http://gouwu.360.cn/">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" />
</a>
</div>
<div class="nav">
<ul class="navhead">
<li><a href="http://gouwu.360.cn/">课程</a></li>
<li><a href="http://gouwu.360.cn/">职业路径</a></li>
<li><a href="http://gouwu.360.cn/">实战</a></li>
<li><a href="http://gouwu.360.cn/">猿问</a></li>
<li><a href="http://gouwu.360.cn/">手记</a></li>
</ul>
</div>
</div>
<div class="content">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" />
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" />
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" />
</div>
<div class="foot">
<ul class="navfoot">
<li><a href="http://gouwu.360.cn/">网站首页</a></li>
<li><a href="http://gouwu.360.cn/">企业合作</a></li>
<li><a href="http://gouwu.360.cn/">人才招聘</a></li>
<li><a href="http://gouwu.360.cn/">联系我们</a></li>
<li><a href="http://gouwu.360.cn/">友情链接</a></li>
</ul>
</div>
</body>
</html>
目前的我的代码里 padding-left:400px；来实现的水平居中效果。
我的问题是：我按F12键查看的时候，页脚的5个li总和宽度是520px，整个页脚div的宽度是794px。
520再加上我设置的padding-left:400px；一共是920px，已经超过了794px。那为什么我显示的效果还能是居中对齐呢？这样不会出错吗？
1回答
-
同学你好， 老师调整浏览器大小， 让页脚div的宽度为794px，此时的宽度不能够容纳所有的子级元素， 会导致li元素被超出隐藏了哦。示例：
另，由于电脑分辨率不同， 在老师的浏览器中测试， 页脚没有居中显示哦。如下图
建议修改： 可以给ul一个固定的宽度， 刚好等于所有子元素的宽度之和， 然后使用margin:0 auto;实现整体居中哦，这样在不同浏览器下都可实现水平居中显示了
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题