有个小问题
我想优化一下顶部和脚部，我想让内容居中一点。 可是padding和margin都只有左边生效，右边没有效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>行布局</title>
<link rel="stylesheet" type="text/css" href="./css/2-4.css"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: auto;
font-family: "微软雅黑";
font-size: 16px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: black;
overflow: hidden;
border: 1px solid red;
}
.header:after,.footer-nav:after {
content: '.';
height: 0;
visibility: hidden;
display: block;
clear: both;
}
.header .logo {
height: 100%;
float: left;
margin-left: 50px;
}
.header .nav-con {
height: 100%;
float: right;
margin-right: 50px;
}
.nav-con .nav {
padding-right: 30px;
height: 100%;
text-align: left;
color: white;
}
.nav .nav-item {
float: left;
margin-left: 30px;
list-style-type: none;
height: 100px;
line-height: 100px;
cursor: pointer;
}
.container {
width: 100%;
margin-top: 100px;
margin-bottom: 100px;
}
.container .banner1,.container .banner2,.container .banner3 {width: 100%;}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background-color: black;
color: white;/*
padding-left: 50px;
padding-right: 50px;*/
}
.footer .footer-nav {
width: 100%;
height: auto;
border: 1px solid red;/*
padding-left: 50px;
padding-right: 50px;
margin-left: 50px;
margin-right: 50px;*/
}
.footer-nav .nav-item{
width: 16.6%;
float: left;
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<div class="logo">
<img src="./images/2-4.png" width="100%" height="100%">
</div>
<div class="nav-con">
<ul class="nav">
<li class="nav-item">慕课</li>
<li class="nav-item">职业路径</li>
<li class="nav-item">实战</li>
<li class="nav-item">原文</li>
<li class="nav-item">手机</li>
</ul>
</div>
</div>
<div class="container">
<div class="banner1">
<img src="./images/2-7-1.jpg" width="100%" height="100%">
</div>
<div class="banner2">
<img src="./images/2-7-2.jpg" width="100%" height="100%">
</div>
<div class="banner3">
<img src="./images/2-7-3.jpg" width="100%" height="100%">
</div>
</div>
<div class="footer">
<ul class="footer-nav">
<li class="nav-item">职业路径</li>
<li class="nav-item">职业路径</li>
<li class="nav-item">职业路径</li>
<li class="nav-item">职业路径</li>
<li class="nav-item">职业路径</li>
<li class="nav-item">职业路径</li>
</ul>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星