老师，container内容部分也是设置margin无效
来源：2-10 编程练习
qq_做不到就别跟我谈永远_0
2019-09-04 15:16:59
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0}
ul li{list-style:none;}
.content{
width:100%;
height:100px;
background:black;
overflow:hidden;
position:fixed;
}
.content-logo{float:left;}
.content-nav{float:right;color:#ffffff;margin-right: 10px;}
.content-nav ul li{float:left;line-height:100px;margin:0 20px;}
.container{padding-top:100px;padding-bottom:100px;background:cadetblue;overflow:hidden;height:1000px;}
.footer{width:100%;height:100px;line-height:100px;margin:0 auto;background:black;color:white;overflow:hidden;position:fixed;bottom:0;}
.footer ul li{float:left;margin:0 20px;}
.container-left{float:left;width:60%;}
.container-left p{font-size:22px;font-weight:400;}
.container-left span{font-size:12px;background:orange;margin-right:15px;}
.container-left ul li{font-size:12px;padding:10px 0;}
.container-right p{font-size:22px;font-weight:400;}
.container-right{float:left;width:40%;}
.container-right span{padding-right:15px;font-size:12px;}
</style>
</head>
<body>
<div class="content">
<div class="content-logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""></div>
<div class="content-nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>疑问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="container-left">
<p>课程推荐</p>
<ul>
<li><span>职业路径</span> HTML5和CSS3实现动态网页</li>
<li><span>职业路径</span> 零基础入门Android语法与界面</li>
<li><span>职业路径</span> IOS基础语法与常用控件</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="container-right">
<p>相关课程</p>
<ul>
<li><span>HTML</span><span>JavaScript</span></li>
<li><span>HTML5</span><span>CSS3</span><span>Jquery</span></li>
<li><span>移动端基础</span><span>移动端APP开发</span></li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>出现问题</li>
<li>官网地址</li>
</ul>
</div>
</body>
</html>
2回答
-
同学你好，
有固定宽度的块元素才能使用margin：0 auto；实现水平方向居中哦，
对于主体部分可以设置padding的值来控制内容到左右两边的距离。
修改如下：
效果：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕嘟嘟
2019-09-04
同学你好，
同学是想让container内容和顶部有一定的距离吗？
因为顶部设置了固定定位，因此会脱离标准流，container的一部分就会跑到顶部的下面，如果想实现让container内容和顶部有一定的距离，可以去掉顶部的固定定位哦，
效果：
如果同学的疑惑不在这里，同学可以详细描述一下问题，方便老师高效的为同学解答哈。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0h019-09-04
相似问题