为什么最后foot标签里的导航不能实现水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.head{width:100%;background:black;overflow:hidden;margin-bottom:0;}
.logo{float:left;}
.nav{color:white;float:right;overflow:hidden;list-style:none;line-height:100%;margin-top:0;margin-bottom:0;padding-right:30px;line-height:104px;}
.nav li{float:left;margin-right:90px;}
.body{margin-top:0;width:100%;height:1100px;background:#87CEEB;overflow:hidden;}
.left li{list-style: none;}
.left{width:50%;float:left;padding-top:50px;}
span{border:solid 1px orange;background:orange;}
.right{width:50%;float:right;padding-top:50px;}
.left ul{margin-left:240px;}
.right h3,.right p{margin-left:60px;}
.foot{width:100%;height:100px;background:black;margin-top:0;overflow:hidden;text-align:center;}
.foot ul{float:right;overflow:hidden;display:;line-height:100px;margin:0;display:inline-block;}
.foot ul li{color:white;float:right;list-style:none;margin-left:50px;}
</style>
</head>
<body>
<div class="container">
<div class="head">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
</div>
<ul class="nav">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="body">
<div class="left">
<ul>
<h3>课程推荐</h3>
<li><span>职业路径</span> HTML与CSS3实现动态网页</li></br>
<li><span>职业路径</span> 零基础入门Android语法与界面</li></br>
<li><span>职业路径</span> IOS基础语法与常用控件</li></br>
<li><span>职业路径</span> PHP入门开发</li></br>
<li><span>职业路径</span> JAVA入门开发</li></br>
</ul>
</div>
<div class="right">
<h3>相关课程</h3>
<p>HTML CSS javaScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="foot">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
五仁胖子1回答
-
聪明的汤姆
因为你设置了右浮动....foot ul { // 把float：right去掉即可 }望采纳，谢谢！
随时随地看视频慕课网APP
相关分类
CSS3