结算创建两个div

Z时代
2024-01-10
分类：问答

之间的空隙，我有我的html的以下部分结算创建两个div

<div class="header">    
    <div class="header-bar"> 
     <div class="pull-left"> 
      <div class="title">Ci models database</div> 
     </div> 
    </div>    
    <div class="clear-both"></div> 
    <ol class=breadcrumb> 
     <li class="active"><a href="#">All models</a></li> 
    </ol> 
</div>

的CSS（面包屑和活动类是自举）

.header-bar { 
    border: None; 
    background-color: #66CCFF; 
    min-height:30px; 
} 
.title { 
    padding: 5px 5px 10px 5px; 
    color: white; 
    font-size: large; 
} 
.clear-both{ 
    clear:both; 
}

但之间的报头 - bar和breadcrumb html添加了一个空格（see bootply）。如何删除此空白区域，因为在div之间没有找到填充和边距。

回答：

阿波斯托，白色的空间与.title类的到来。
10px的底部填充。
零这个和白色空间会去。

.title { 
    padding: 5px 5px 0px 5px;

回答：

您将不得不向两个父容器（.header-bar和breadcrumb）添加float: left，否则清除不会影响任何内容。此外，你将不得不放弃这两个容器width: 100%

.header-bar { 
    border: None; 
    background-color: #66CCFF; 
    min-height:30px; 
    width: 100%; 
    float: left; 
} 
.breadcrumb { 
    width: 100%; 
    float: left; 
} 
.title { 
    padding: 5px 5px 10px 5px; 
    color: white; 
    font-size: large; 
} 
.clear-both{ 
    clear:both; 
}