Question

这是我基于css div的布局代码。我想在#header div中找一个搜索框。但是当我向 #header .search 类添加边距或填充时，它会将此值添加到#header div的高度。请帮帮我怎样才能正确使用它。我希望搜索框位于#header div结束的10px margin-bottom。

#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}

#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
}

#header .search {
margin:0px auto;
text-align:center;
width:620px;
}

Answer 1

在两个标签上插入显示，并添加边距底部。应该工作

Answer 2

您可以将搜索框完全放在#header

中

#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}

#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
position:relative; // parent container
}

#header .search {
margin:0px auto;
text-align:center;
width:620px;
position:absolute;
left:0; bottom:10px;
}

这样您的搜索框就不会影响父容器。

演示：http://jsfiddle.net/fparent/AyyZG/

标题div中的搜索div？

2 个答案: