1请问底部的ul列表怎么水平居中，2我的上下部分为什么宽度是120.检查显示有个ul是20px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写head*/
body{margin: 0 padding:0; font:20px "微软雅黑";}
.head,.footer{width: 100%
height:100px;
background-color:black;
overflow: hidden;
}
.logo{float: left;}
.nav{float: right; margin-right: 50px;}
a{text-decoration: none; color:white;}
.nav ul li,.footer ul li{float: left;
margin-right: 40px;list-style-type: none;
height:100px;line-height: 100px;}
/*此处是content*/
.content{width: 100%;height: 1000px;background: skyblue;overflow: hidden;}
.con-middle div p a{color: black;}
.con-left,.con-middle{float: left;width: 30%;height: 1000px;}
h3{font-size:1.5em; font-weight: bold;}
.con-left div p span{background: pink;}
.con-left div,.con-middle div,.con-right div{padding-top: 150px;padding-left: 100px;}
.con-right{float: right;width: 39%;height: 1000px;}
input{height: 3em; width: 20em;}
.con-right{border-left:6px solid orange; }
/*此处写footer*/
</style>
</head>
<body>
<!-- 此处写代码 -->
<!-- 此处是头部 -->
<div class="head">
<!-- 此处是logo -->
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></div>
<!-- 此处是导航 -->
<div class="nav">
<ul>
<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>
</div>
<!-- 此处是中部 -->
<div class="content">
<!-- 此处是left -->
<div class="con-left">
<div>
<h3>课程推荐</h3>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> ios基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
</div>
<!-- 此处是中间 -->
<div class="con-middle">
<div>
<h3>相关课程</h3>
<P><a href="">HTML</a> <a href="">CSS</a> <a href="">JavaScript</a></P>
<P><a href="">HTML5</a> <a href="">CSS3</a> <a href="">Jquery</a></P>
<P><a href="">移动端基础</a> <a href="">移动端APP开发</a></P>
</div>
</div>
<!-- 此处是right -->
<div class="con-right">
<div>
<h3>登录</h3>
<form method="post">
<input type="text" name="name" placeholder="请输入登录邮箱、手机号" size="35"><br/><br/>
<input type="password" name="password" maxlength="16" placeholder="6-16位密码，区分大小写，不能用空格" size="35"><br/><br/>
<input type="submit" name="submit" >
</form>
</div>
</div>
</div>
<!-- 此处是底部 -->
<div class="footer">
<ul>
<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>
正在回答
1、首先你用了ul、li标签，这些标签是有默认的填充样式的，需要在最开始清除一下，不止是给body清除，所以这么写，用*通配符就表示所有的标签都会清除：
body中的padding和margin两个属性之间缺少分号，所以不会起作用。在这儿直接删掉就行了，因为已经有了上面截图的代码，body也包括在*中，如下修改：
2、这里也缺少分号：
记得以后每次写完一句就加上分号。
2、说一下你的第一个问题（底部导航居中）：
（1）让内容在li中居中：
（2）给ul设置宽度，然后margin：0 auto可以实现居中：
3、关于你说到的第二个问题不太明白你说的什么意思，不过我猜测可能是ul li的默认填充，你按照上面的建议修改之后再检查一下看看还有没有这个问题，如果还有的话，你截图给我看看，我再帮你看看。
如果帮助到了你，欢迎采纳！
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星