老师请问为什么，我给footer设置position:fixed，它就整个消失？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.head{background:#000;
width:100%;
height:100px;
position:relative;
font-size: 20px;
position: fixed;
}
.logo{
position:absolute;
left:0;}
/*.logo img{display:block;}*/
.nav{color:#fff;
position:absolute;
right:0;
top:50%;
height:20px;
margin-top:-10px;
}
.nav ul{list-style:none;
padding-right:100px;
}
.nav ul li{float:left;
margin-right:40px;}
.content{padding-top: 100px;}
.content img{width:100%;
height:auto;
display: block;}
.footer{background:#000;
width:100%;
height:100px;
position: relative;
}
.footer ul{list-style: none;
position:absolute;
font-size:20px;
color:#fff;
left:50%;
top:50%;
margin-top:-10px;
margin-left: -20%;
}
.footer ul li{float:left;
padding: 0 40px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="page">
<div class="head">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业顾问</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="content">
<div><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"></div>
<div><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
</div>
<div><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"></div>
</div>
<div class="footer">
<ul>
<li>课程</li>
<li>职业顾问</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
</body>
</html>
正在回答
同学你好， 1. 因为你是使用左右padding值实现左右空白间距， 所以实现的效果文字是居中的，但是由于不容易控制整体ul的宽度， 所以建议使用给里设置一个宽度的方式实现
2、因为margin： 0 auto；只对有固定宽度的块级元素实现水平居中有效，如果你的单行文字不是块级元素的话就无法生效
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星