请老师看一下有什么问题？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.head{width:100%;
height:100px;
background: #000;
}
.head .logo{float:left;}
.head .logo img{display: block;}
.head .nav ul{color:#fff;
float: right;
font-size: 20px;
list-style: none;
margin-right:40px;
}
.head .nav ul li{float: left;
line-height: 100px;
padding: 0 20px;}
.page .main{width:100%;
overflow: hidden;}
.main .left{width:30%;
background: #87cefa;
height:700px;
/*position: relative;*/
float: left;
}
.main .left .containt{text-align: left;
line-height: 40px;
/*position:absolute;*/
margin-top:150px;
margin-left: 150px;
}
span{background: pink;}
.main .middle{width:29.8%;
background: #87cefa;
height:700px;
/*position: relative;*/
float: left;
border-right: 2px solid orange;}
.main .middle .containt{line-height: 40px;
/*position:absolute;*/
margin-top:150px;
margin-left: 150px;}
.containt form{width: 304px;}
.containt form input{width: 300px;
height:40px;
margin-top: 15px;}
.comtaimt .btn{border: none;
background:red;
color: #fff;
width: 304px;}
.main .right{width:40%;
background: #87cefa;
height:700px;
float: left;}
/*position:relative;}*/
.main .right .containt{
margin-top:150px;
margin-left: 150px;
}
/* .main .right .containt table{text-align: center;
color:#fff;
letter-spacing: 20px;}*/
.footer{width:100%;
height:100px;
background: #000;
position: relative;}
.footer ul{list-style: none;
line-height: 100px;
position: absolute;
left:50%;
margin-left: -360px;}
.footer ul li {color: #fff;
float: left;
font-size: 20px;
padding:0 20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="page">
<div class="head">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业顾问</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="main">
<div class="left">
<div class="containt">
<h2>课程推荐</h2>
<p><span>职业路径</span> html和css实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法和界</p>
<p><span>职业路径</span> 基础语法与界</p>
<p><span>职业路径</span> php入门开 </p>
<p><span>职业路径</span> java入门开发</p>
</div>
</div>
<div class="middle">
<div class="containt">
<h2>相关课程</h2>
<p>HTML CSS Javascript</p>
<p>HTML CSS3 Jquery</p>
<p>移动端基础 移动端App开发</p>
</div>
</div>
<div class="right">
<div class="containt">
<h2>登录</h2>
<form>
<!--<table cellspacing="40px">
<tr>
<td>-->
<input type="text" name="xinxi" placeholder="请输入登录邮箱/手机号" />
<!--</td>
</tr>
<tr>
<td>-->
<input type="password" name="mima" placeholder="6-16位密码，区分大小写，不能用空格" />
<!--</td>
</tr>
<tr>
<td bgcolor="red">-->
<input type="button" name="登录" value="登录" class="btn" />
<!--</td>
</tr>
</table>-->
</form>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>练习我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
正在回答
你好同学，如果设置文字间距20px，那么每一个文字右边都会有20px的间距了，这样文字肯定是不居中的，不过有一个小技巧，就是在文字前面手动设置一个空格，空格也相当于一个字符，这样让“登”的左边也有20px间距，登录就居中了，即如下：
不过本题中并没有要求设置文字间距，效果图中的文字是紧挨着的，所以本题建议同学不用设置letter-spacing哦
祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星