底部li始终没有办法居中显示，我用了绝对定位，但感觉不妥，还有没有更好的办法？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body{
        margin:0px;
        padding:0px;
		font-family:"微软雅黑";
    }
    .header{
		position:fixed;
		top:0;
        width:100%;
        height:100px;
        background-color:black;
    }
	.logo{
		width:300px;
		height:100px;
		float:left;
		overflow:hidden;
	}
	.nav{
		width:550px;
		height:100px;
		float:right;
		text-align:center;
		line-height:100px;
	}
	.nav-ul{ 
		float:right;
		overflow:hidden;
		color:#fff;
		margin:auto 0;
	}
	.nav-ul-li{
		text-align:center;
		font-size:24px;
		float:left;
		overflow:hidden;
		margin:0 20px;
	}
	a{
		text-decoration:none;
		color:#fff;
	}
	.kongbai{
		width:100%;
		height:100px;
	}
	.main{
		margin:0 auto;
		font-size:0;/*去除图片之间的空隙*/
		width:100%;
		height:480px;
	}
	.main img{
		width:100%;/*图片自适应*/
	}
	.footer{
		position:fixed;
		bottom:0;
		width:100%;
		height:100px;
		background-color:black;
	}
	.footer ul{
		width:100%;
		height:100px;
		margin:0 auto;
		text-align:center;
	}
	.footer ul li{
		float:left;
		overflow:hidden;
		text-align:center;
		line-height:100px;
		font-size:24px;
		margin:0 60px;
		position:relative;
		left:12%;
	}
  </style>
</head>
<body>
	<div class="header">
		<div class="logo">
			<a href="#">
				<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
			</a>
		</div>
		<div class="nav">
				<ul class="nav-ul" type="none">
					<li class="nav-ul-li"><a href="#">课程</a></li>
					<li class="nav-ul-li"><a href="#">职业路径</a></li>
					<li class="nav-ul-li"><a href="#">实战</a></li>
					<li class="nav-ul-li"><a href="#">猿问</a></li>
					<li class="nav-ul-li"><a href="#">手记</a></li>
				</ul>
		</div>
	</div>
		<div class="kongbai"></div>
		<div class="main">
			<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/>
			<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/>
			<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/>
		</div>
		<div class="footer">
			<ul type="none">
				<li><a href="#">网站首页</a></li>
				<li><a href="#">企业合作</a></li>
				<li><a href="#">人才招聘</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">友情链接</a></li>
			</ul>
		</div>
</body>
</html>

Ev4ngel 2018-12-05

源自：CSS网页布局基础 2-7 编程练习

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2018-12-05 10:08:31

你好同学 ,你理解的是对的 . 因为内容宽度设置成100% , 设置居中也看不到效果 . 建议同学设置固定宽度 , 宽度恰好可以放下整个ul的内容即可 :

li去掉定位 , 超出隐藏也不需要设置

ul宽度正好可以放下所有的li即可居中:

另外 ,初始化的样式建议使用通配符设置:

祝学习愉快 ,望采纳 .

收起回答

Ev4ngel 提问者 #1

.footer ul的width设置固定值后还能自适应吗？

2018-12-05 13:00:30
好帮手慕夭夭回复提问者 Ev4ngel #2

你好同学 ,固定宽度的元素不会自适应了 .本练习中尾部内容不需要自适应 . 如果同学还是不想设置固定宽度 , 可以去掉ul的宽度并设置display: inline-block; .然后给.footer设置 text-align: center; 让里面的内容居中也可以 .

2018-12-05 15:14:59
Ev4ngel 提问者回复好帮手慕夭夭 #3

哦哦，懂了，谢谢老师！

2018-12-05 16:47:52