1

我创建了以下 div 及其定义。

<div class="serach-container">
  <div class="search-keys-container">
    <div class="search-type"> </div>
    <div class="basic-search-keys-container"> </div>
    <div class="advance-search-keys-container"></div>
  </div>
  <div class="search-result-container"></div>
</div>
.search-type{
    height:20px;
    width:auto;
    margin:5px 10px;
    background-color:#4000A0;
}

jsfiddle

但不幸的是,类搜索类型的上边距上升。我尝试通过调整边距来调整。但是没有找到结果。没有边距就可以了。但我想要利润。

编辑:

我不知道为什么 top-margin 不起作用。无论如何,另一种解决方案是在搜索类型div之前放置另一个 div 说error-correct

<div class="serach-container">
  <div class="search-keys-container">
     <div class="error-correct"></div>
     <div class="search-type">/div>
     <div class="basic-search-keys-container"></div>
     <div class="advance-search-keys-container"></div>
  </div>
  <div class="search-result-container">
  </div>
</div>

.search-type{
  height:20px;
  width:auto;
  margin:0px 10px 5px 10px;
  background-color:#4000A0;
}
.error-correct{
  width:100%;
  height:5px;
}

jsfiddle 感谢所有朋友的大力帮助。

4

4 回答 4

1

演示

尝试像这里一样更改该类:

.search-type{
height:50px;
width:90%;
margin:0px auto;
background-color:yellow;
}
于 2013-06-23T14:40:42.507 回答
1

试试这个,让我知道这是否是你想要的。

.search-type{
    height:20px;
    width:auto;
    margin:5px 10px 0 10px;
    background-color:#4000A0;
}

这使它下降并仍然保持您的利润。

于 2013-06-23T14:41:39.763 回答
1

正如我在评论中所说,您的尺寸定义有点过于严格......但是要解决您的问题,您应该这样做:

.search-result-container{
    height:100%;
    width:100%;
    background-color: #0000FF;
    padding-top: 5px;
}

.search-type{
    height:20px;
    width:auto;
    margin: 0 10px 5px 10px;
    background-color:#4000A0;
}

对我来说,这看起来像一个错误或其他东西,因为边距不是应用于父级,而是应用于 body 标签。

此外,您在第一个容器中有一个小错字serach

于 2013-06-23T14:47:17.460 回答
0

尝试添加padding:0.01px.search-keys-container. 它不会有任何视觉效果,但会导致边距不会像这样折叠。

于 2013-06-23T14:24:23.147 回答