标题 div 内的搜索 div？答案

【问题标题】：A search div inside header div?标题 div 内的搜索 div？
【发布时间】：2012-01-23 17:51:08
【问题描述】：

这是我的基于 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;
}

【问题讨论】：

这似乎很奇怪，.search 上的 CSS 代码填充或边距会影响 #header。你能在 jsfiddle 上发布一个例子吗？
你的 HTML 是什么？请在 jsfiddle.net 上举个例子

标签： html css

【解决方案1】：

您可以将搜索框绝对定位在#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/

【讨论】：

与绝对位置对齐很困难，因为元素不在文档流中。一个常见的解决方法是将“left”属性设置为“50%”并添加一个元素宽度一半的 negative“margin-left”。例如左：50%；左边距：-100px;

【解决方案2】：

在两个标签上插入一个显示，并添加一个margin-bottom。应该工作

【讨论】：