如何解决浏览器页面缩小时，网页内容位置变动的问题

来源：2-2 编程练习

WJ沪00001

2019-04-02 12:35:22

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
   .head{
    width: 100%;
    height: 100px;
    background-color: gray;
   }
   .logo{
    float: left;
   }
   .logo img{
     padding-top: 10px;
     padding-left: 30px;
   }
   .nav{
     width: 450px;
     float: right;
   }
   .nav ul{
    margin-right: 130px;
   }
   .nav ul li{
      float: left;
      list-style: none;
      line-height: 100px;
      padding-left: 40px;
   }
  </style>
</head>
<body>
    <div class="head">
       <div class="logo">
         <img src="http://climg.mukewang.com/595dd5120001736902000080.png" alt="logo">
       </div>
       <div class="nav">
         <ul>
           <li>前端</li>
           <li>后端</li>
           <li>移动端</li>
           <li>数据库</li>
         </ul>
       </div>
    </div>
</body>
</html>

写回答

1回答

好帮手慕慕子

2019-04-02

同学你好，由于浏览器宽度变小后 , 同一行放不下所有的元素 , 所以会被挤下来，学习网页初期 , 可以给页面设置一个最小宽度 , 最小宽度需要结合页面的情况 , 例如min-width:1200px . 那么页面缩小到1200px后就会出现横向滚动条了 , 不会在缩小了，这样页面内容位置就不会发生变动了，示例：

如果帮助到了你，欢迎采纳

祝学习愉快~~

0 学习 · 36712 问题

查看课程

相似问题

为什么遮罩会随着页面的缩小而变小怎么处理呢

回答 4

老师为什么放大缩小浏览器以后A WORD ABOUT US这个字会被右面的图片挡上？

回答 1

写完一个网页后放大或者缩小后会出现元素移位，这是什么原因，有什么解决方法吗

回答 1

为什么我把网页缩放比例缩小或放大时，网页布局就乱了。

回答 4

将窗口缩小时固定导航条的文字会被挤出外面，怎么做才能使窗口缩小时文字隐藏并出现横向滚动条？

回答 6

打开慕课网App查看更多内容