Question

当我调整浏览器大小时，我的Html文档中的元素不断移动。当我调整大小时以及将窗口拖到外部显示器时，它会移动。当我调整窗口大小时，我希望元素保持原样，任何帮助都会非常感激。

这是HTML代码：

<!DOCTYPE HTML>
<html>
<head>
  <title>Udarit.com/home</title>
  <link href= "MissionImpossible2.css"
      rel="stylesheet"
      type="text/css">
</head>
<body>
  <div id="away"> 
    <button id="fix">LOGIN</button>
  </div>  
  <div id="break">
  <div id="lose">
  <form class= you>
    <input id= nuke
           type="search"
           class="searchterm"
           placeholder="search">
   <button id="mama">
   <img id= "reap"
        class="search-icon"
        src="1499177797_Search.svg">
   </button>
 </form>   
 </div>
 </div>
  </body>
</html>

这里是CSS：

*{margin:0; padding:0;box-sizing:border-box;}
 #nuke {width:500px;
  height: 50px;
position: relative;
top:50%;
left:30%;
border-style:outset;
border-color:gainsboro;
border-radius: 5px;
background-color:ghostwhite;
}
#reap{position: relative;
            height:30px;
            border-radius: 10px;
border-style: none;
            }

#mama{position: relative;
height: 47px; 
width:40px;
top:10px;
  left: 19.5em;
  border-style: none;
background-color: rgba(0,0,0,0.1);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;}

#hey{width: 180px;
 position: relative;
right:480px;
top:5px;}

#break{position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color:aqua;
background: rgba(51,51,51,0.7);
background-image:url("");
}

#lose{position: relative;
top:50%;}

#away{border-style:hidden;
  height:80px;
 background-color: aqua;
 background-color:rgba(0,0,0,0.1);
  z-index: 1;}

#fix{width:100px;
height: 40px;
position: relative;
left:900px;
top:20px;
color:white;
background-color:blue;
z-index:10;
border-style:none;
border-radius:10px;
font-family:monospace; 
 }

请解释为什么会发生这种情况以及如何预防，以备将来使用。

Answer 1

这取决于元素在页面上的位置。登录按钮保持不变，因为您使用像素定位它。

您的表单输入元素正在移动，因为您已使用百分比将其放置在页面上。

如果您希望自己的网页能够在不同的屏幕尺寸上工作，那么最好更加流畅地布置元素。例如，您可以使用position: absolute和right: 0来固定登录按钮以停留在任何浏览器窗口的右侧。

您也可以拥有固定宽度的网页，但将其置于中间，有点像StackOverflow在其桌面视图上。您可以通过创建一个带有固定的div然后将margin: 0 auto应用于div并将元素放入其中来实现此目的，如果您愿意，可以像容器一样。

当我调整窗口大小时，我的网页上的项目会不断变化

1 个答案: