Question

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

我在堆栈溢出中搜索了一个解决方案，一些人回答使用wrap元素来包装正文中的所有内容并保持min-width属性。

我尝试使用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 absolute和elements设置在wrap relative

中

#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以及百分比位置使元素变得灵活。避免这种情况，因为将来它对响应式设计也是不利的

浏览器调整大小时如何阻止元素行为不端？

2 个答案: