请大神赐教~
1. foot部分为什么直接设置text-align实现不了文字水平居中效果呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.head{width:80%;height:100px;background:black;margin:0 auto;overflow:hidden;}
.head img{float:left;}
.head ul{float:right;color:white;list-style:none;font-weight:bold;}
.head ul li{float:left;padding:25px 25px 15px 25px;}
.content{width:80%;height:auto;margin:0 auto;overflow:hidden;}
.content .lside{width:50%;background:#add8e6;height:400px;float:left;}
.content .rside{width:50%;background:#add8e6;height:400px;float:right;}
.lside dl{padding-top:35px; padding-left:200px;}
.lside dt{font-size:20px;font-weight:bold;padding-bottom:10px;padding-left:40px;}
.lside dd{margin-bottom:10px;}
.lside span{background-color:pink;}
.rside dl{padding-top:35px; padding-left:50px;}
.rside dt{font-size:20px;font-weight:bold;padding-bottom:10px;padding-left:40px;}
.rside dd{margin-bottom:10px;}
.foot{width:80%;margin:0 auto;height:60px;background:black;line-height:60px;/*text-align:center;*/}
.foot ul{list-style:none;color:white;margin-left:220px;}
.foot ul li{float:left;padding-left:15px;font-size:10px;}
/*此处写代码*/
</style>
</head>
<body>
<div class="head">
<div><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></div>
<div>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="content">
<div class="lside">
<dl>
<dt>课程推荐
<dd><span>职业路径</span> HTML5与CSS3实现动态页面</dd>
<dd><span>职业路径</span> HTML5与CSS3实现动态页面</dd>
<dd><span>职业路径</span> HTML5与CSS3实现动态页面</dd>
<dd><span>职业路径</span> HTML5与CSS3实现动态页面</dd>
<dd><span>职业路径</span> HTML5与CSS3实现动态页面</dd>
</dt>
</dl>
</div>
<div class="rside">
<dl>
<dt>相关课程
<dd>HTML CSS JavaScript</dd>
<dd>HTML CSS JavaScript</dd>
<dd>HTML CSS JavaScript</dd>
</dt>
</dl>
</div>
</div>
<div class="foot">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
慕尼黑47570191回答
-
qq_沉心_0
因为.foot里面的ul是块级元素
随时随地看视频慕课网APP
Html/CSS