如何在调整浏览器大小时停止元素的异常行为？

Question

我是网页设计和堆栈溢出的新手，我正在从“Odin项目”中学习。在这个过程中，我必须建立一个没有任何功能的"www.google.com“的外观。我使用Html和css完成了它。现在，当我调整浏览器窗口的大小时，html中的元素正在移动和调整大小。

我在堆栈溢出中寻找了一个解决方案，一些人回答说使用一个wrap元素来包装主体中的所有内容，并保持它的最小宽度属性。

我尝试使用wrap div，但问题仍然存在。

​

img{
  margin:auto; border:1px solid black; position:absolute;
  top:30%; left:38%; width:295px; min-width:295px;
}
ul{
  list-style-type:none;
}
li{
  padding:4px; display:inline;
}
a{
  text-decoration:none;
}
nav{
  position:absolute; right:2%; top:0%;
}
#search{
  position:absolute; left:30%; top:50%; width:530px;
  min-width:530px; margin:auto; height:6%;
}
#butt{
  position:absolute; left:37%; top:58%;
  width:325px; min-width:325px; border:1px solid red;
}
#wrap{
  border:1px solid black; width:auto; min-width:1500px;
}

<html>
  <head>
    <link type="text/css" href="style.css"  rel="stylesheet"  >
  </head>
  <body>
  <div id="wrap" >
    <nav>
        <ul>
           <li><a href="">Gmail</a></li>
           <li><a href="">Images</a></li>
	       <li><a href=""><button style="color:white; background-color:blue;width:auto;height:28px;">Sign in</button></a></li>
        </ul>
    </nav>
       <img src="http://freeworld.co.in/wp-content/uploads/2013/03/google_india_logo1.jpg"/>

       <input type="text" id="search" />

       <div id="butt">
           <ul>
               <li><a href=""><button style="width:auto;height:28px;">Google Search</button></a></li>
	           <li><a href=""><button style="width:auto;height:28px;">I'm Feeling Lucky</button></a></li>
           </ul>

        </div>
    </div>
  </body>
</html>

​

元素中的边框是有意的。

Answer 1

问题是您放置的是绝对元素，而不是包装。正如最近发布的，wrap没有做任何事情。

尝试定位绝对包装和相对包装内的元素

#wrap {
   position: absolute;
   top: 30%; left: 0; right: 0; margin: 0 auto;
   text-align: center; // important
}

然后，您将需要在此元素中重新定位内容

img {
   // position: absolute <-- remove this & all top left right bottom
   margin: 0 auto;
   ... // rest of your css
}

#search {
   // position: absolute <-- remove this & all top left right bottom
   margin: 10px auto;
   ... // rest of your css
}

#butt{
   // position: absolute <-- remove this & all top left right bottom
   margin: 10px auto;
   text-align : center;
   // Remove width attribute
   ... // rest of your css
}

ul {
  margin: 0 auto; text-align: center;
}

这是一个粗略的例子http://codepen.io/anon/pen/vLeNXE?editors=110 (真正的粗略的导航应该放在包装之外，以便再次添加到顶部)

Answer 2

当你可以适当地使用边距和填充样式时，为什么要使用绝对css呢？您的绝对CSS和百分比位置使元素变得灵活。避免这种情况，因为在将来，这对响应式设计也是不利的