老师请问为什么我这两个地方是这样？为什么要给logo和导航处加宽高？

<!DOCTYPE html>

<html>

<head>

*{margin: 0px;padding: 0px;}

.contener{margin:0px auto;}

.header{background: #ececec;

width: 1200px;

margin:0px auto;

overflow: hidden;

zoom:1;

}

.logo{float:left;

height: 20px;

width:30px;

line-height: 20px;}

.nav li{list-style: none;

float: right;

margin-right:20px;

padding:30px 20px;

}

li a{color:#000;

font-family: "微软雅黑";

text-decoration:none;

height: 20px;

display: block;

line-height:20px;}

.nav a:hover{color:#fff;}

.main{margin:0px auto;

overflow: hidden;}

.main .con{background:blue;

height:600px;

width:1000px;

margin:0px auto;

float:left;}

.main .sid{background: orange;

width:200px;

height:600px;

margin:0px auto;

float:left;}

.footer{background:pink;

width:1200px;

height:100px;

margin:0px auto;}

</style>

<body>

<ur>

</ur>

</div>

<div class="con">cotent</div>

<div class="sid">sidebar</div>

</div>

<div class="footer">footer</div>

</div>

</body>

慕大斯 2019-06-05

源自：float浮动 3-3 Float案例演示（3）

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2019-06-05 14:27:48

你好同学，解答如下：

导航中的li因为设置了右浮动，所以会按照顺序从右往左排列，想要实现从左往右排列，应该是设置左浮动，如下修改

导航li设置浮动，所以父元素记得清除浮动哦

2.中间的区域没有居中是因为盒子没有设置固定的宽度，它默认相对浏览器100%显示，所以看不到居中效果，如下修改即可：

3.logo和导航可以给它们设置固定的宽高，也可以不设置。根据自己的编码习惯去写就行哦。

祝学习愉快，望采纳。

收起回答

慕大斯提问者 #1

谢谢，这是不是涉及到一个整体的导航部门和里边li部分？整体.nav又浮动就是让导航部分全部到右边，li左浮动是不是设置每一个li都左浮动成一列？

2019-06-05 14:53:33
好帮手慕夭夭回复提问者慕大斯 #2

同学理解的是对的哦

2019-06-05 16:45:01