老师，当宽度过小时，我的logo和导航就会重叠，怎么解决啊

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body,div{
        padding:0px;
        margin:0px;
    }
    .big{
        background:black;
        color:white;
        height:100px;
        margin:0 auto;
        max-width:1100px;
    }
    .logo{
        /*float:left;*/
        width：120px;
        height:100px;
    }
    .nav{
        height:100px;
        width:300px;
        /*float:left;*/
        position:absolute;
        top:0;
        right:0;
    }
    .nav-li{
        height:100px;
        padding:10px;
        float:left;
        text-align:center;
        line-height:80px;
    }
    a{text-decoration: none;
        color:white;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="big">
        <div class="logo">
          <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" width="150px" height="100px"></a>
        </div>
        <div class="nav">
            <div class="nav-li"><a href="#">课程</a></div>
            <div class="nav-li"><a href="#">职业路径</a></div>
            <div class="nav-li"><a href="#">实战</a></div>
            <div class="nav-li"><a href="#">猿问</a></div>
            <div class="nav-li"><a href="#">手记</a></div>
        </div>
  </div>
</body>
</html>

gjw 2017-06-30

源自：CSS网页布局基础 2-4 编程练习

收起

2回答

提问者 gjw 2017-06-30 18:29:22

麻烦您了谢谢老师

收起回答

樱桃小胖子 2017-06-30 13:30:45

设置网页的最小宽度，例如：

body{
	width: 100%;
	font-family: "微软雅黑";
	min-width:1200px;
}

希望可以帮到你！

收起回答

提问者 gjw #1

老师还是不行啊还会重叠

2017-06-30 16:36:23
樱桃小胖子回复提问者 gjw #2

第一你.logo{}中width：120px;的冒号写成中文状态下的了，需要改成英文状态下的冒号: 第二、.nav中使用绝对定位导致右侧导航脱离文档流，需要去掉决定定位极其位移量值（top:0; right:0;）然后给.nav设置float:right;给logo设置float:left;然后在.big里面设置min-width:1100px;就可以实现啦~

2017-06-30 16:57:53