为什么.container的高度设置为100%时，它的宽度比同样是100%宽度的.header还宽呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.header{width:100%;height:100px;background:black;}
.logo{float:left;}
.nav{float:right;}
.header-ul li{display:inline;line-height:100px;font-size:22px;color:white;margin-right:42px;}
.container{height:512px;padding:0px 217px 0px 278px;}
.middle{width:100%;height:512px;background:rgb(255,192,203);}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"/>
</div>
<div class="nav">
<ul class="header-ul">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
正在回答
同学你好，你是想问同样设置了width=“100%”以后container的宽度比header宽吗？
1、如果是的话是因为在给container设置width=“100%”的同时还设置了padding值的话，左右的padding会将container盒子撑大。所以container的宽度会比header宽，水平方向上已经有了滚动条。
练习代码：
可以通过给middle设置text-align：center的方法实现图片的水平居中，建议参考：
2、另外给同学提一个小建议，网页头部的logo部分图片的高度超过了父盒子的高度，练习效果图如下：
这是由于图片是内联元素，底部默认存在间隙，可以将图片设置为block块。
建议参考：
3、还有一点是练习要求鼠标放到导航项上变小手状，字体变橘色。建议参考：
希望我的回答能帮助到你，望采纳，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星