这有点难以解释，但我会试一试。基本上，我在一页上有 3 个“主要”div。第一个是导航栏，第二个是搜索框，第三个是内容框。
我希望它们一个接一个，所以导航栏 > 搜索框 > 内容框。我遇到的问题是，当我将 margin-top: 10px; 设置到内容框时，它直接位于导航栏下方，而不是搜索框下方。它似乎忽略了搜索框，我终究无法弄清楚为什么。我对这一切都很陌生，所以如果这是一个新手错误，请多多包涵。
谢谢!
<body>
<div id="navbar">
<img class="navbar" src="images/homebutton.png" />
<img class="navbar" src="images/e-3button.png" />
<img class="navbar" src="images/resignedbutton.png" />
<img class="navbar" src="images/firedbutton.png" />
<img class="navbar" src="images/desertersbutton.png" />
<img class="navbar" src="images/mosrosterbutton.png" />
<img src="images/divider.png" />
<p><script language="JavaScript">dT();</script></p>
</div>
<div id="search">
<img src="images/logo.png" />
<b><p>Search</p></b>
<form action="" id="search_habbo">
<input type="text" name="habbo_name" id="habbo_name" size="30" required>
<br>
<input type="submit" value="Search" name="send" id="send">
</form>
<div id="search_results">
<div id="loadingimage">
<img src="images/ajax-loader.gif" />
</div>
</div>
</div>
<div id="content">
</div>
</body>
#navbar {
background: url(images/navbarbg.png);
width: 100%;
height: 55px;
line-height: 20px;
margin: 0;
white-space: nowrap;
display: inline-block;
}
#search {
display: block;
width: 920px;
height: auto;
background: #fff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 5px;
position: absolute;
top: 65px;
left: 50%;
margin-left: -462px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
-moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
-webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
}
#content {
width: 920px;
height: auto;
margin-top: 10px;
background: #fff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 5px;
position: absolute;
left: 50%;
margin-left: -462px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
-moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
-webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
}
最佳答案
它忽略了搜索框，因为你有#content
postion: absolute;
改成
position: relative;
或者添加类似的东西
top: 40px;
关于HTML div 忽略 margin-bottom 的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20600285/