Question

我正在克隆BBC网站，当我将一个div放在另一个下方后清除浮动时，它在菜单栏容器和menu-bar2-container之间产生了一个高度为10px的空白。

我不确定哪个元素包含bug，所以我粘贴了我的整个代码。我已经在菜单栏容器和menu-bar2容器中相对定位了元素。高度是自动的，你可以在这里查看所有内容。

页面编码如下：

<body>
<div id="topbar">
<img id="logo" src="images/bbc_logo1600.png"/>    
<div class="top-menu">
<img id="signin-image" src="images/signin-image.PNG"/>


<span id="signin-text">Sign in</span>
 <img id="squiggly-line" src="images/squiggly-line.PNG"/>
<img id="bell-img" src="images/bell.PNG"/>
 <div class="top-menu ">
<span class="top-menu-text">News</span>     
 </div>
 <div class="top-menu ">
 <span class="top-menu-text">Sport</span>     
 </div>
 <div class="top-menu ">
 <span class="top-menu-text">Weather</span>     
 </div>
 <div class="top-menu ">
 <span class="top-menu-text">iPlayer</span>     
 </div>
 <div class="top-menu ">
 <span class="top-menu-text">TV</span>     
 </div>
 <div class="top-menu ">
 <span class="top-menu-text">More</span>
 <img  id="more-arrow" src="images/more-arrow.PNG"/>     
 </div>
 <div id="search-menu">
     <input id="search" value="Search" type="text"/>
     <input type="image" id="magnifying-glass" src="images/magnifying-glass.PNG"/>
    </div>
   </div>
   </div> 
   <div class="clear"></div> 
   <div class="menu-bar-container">
   <div class="menu-bar">
     <h1>NEWS</h1>
   <div id="local-news"><a href="">Find local news</a> <img src="images/pointer.PNG"/></div>
     </div>
   </div>  
<div class="clear"></div> 
 <div class="menu-bar2-container">
   <div class="menu-bar2">
     <a href="">Home</a>
   <a href="">UK</a>
      </div>
     </div> 
  </body>

以下是此页面的CSS：

#topbar{
width: 1050px;
height: 40px;
margin: 0px auto;
}

body{
margin: 0;
padding: 0;
font-family: sans-serif;
overflow: hidden;
}

#logo{
 margin:8px 10px;
 float: left;
}

#signin-image{
 height: 25px; 
 margin:8px 12px;
 float: left;
 }

#signin-text{
 font-weight: bold;
 float: left;
 font-size: 14px;
 padding:12px 40px 12px 5px;
 }
#squiggly-line{
 height: 40px;
 float: left;
 }

#bell-img{
height: 30px;
float: left;
margin: 5px;
}

#more-arrow{
 height: 10px;
 float: left;
 margin:14px 8px 14px; 0px;
}

#search-menu{
    float: left;
    border-left: 1px solid #e4e4e4;
    height: 40px;
}

#search{
 background: #e4e4e4;
 font-weight: bold;
 border: none;
 font-size: 14px;
 padding: 5px;
 margin: 8px 0px 8px 20px;
 float: left;    
 }

#magnifying-glass{
float: left;
height: 25px;
margin:8px 0px;
}
.top-menu-text{
 float: left;
 font-size: 14px;
 font-weight: bold;
 margin: 10px 20px;
}

.clear{
 clear: both;
 }

.top-menu
 {
border-left: 1px #e4e4e4 solid;
height: 100%;
float: left;
 }

.menu-bar-container{
  width: 100%;
  background: #bb1919;
  border-top: 1px solid #CCCCCC;
  }

.menu-bar{
 width: 1050px;
 height: 60px;
 margin: 0px auto;
 }

h1{
  color: white;
  font-weight: normal;
  margin:15px 0px;
  float: left;
  }

 #local-news{
 border: 1px solid #bb4545; 
 float: right;
 position: relative;
 top: 10px;
 bottom: 0px;
 }

#local-news a{
  font-size: 30px;
  color: white;  
  text-decoration: none;
  padding-left: 10px;
  }

#local-news a:hover{
  text-decoration: underline;
  }

 #local-news img{
 height: 35px;
 position: relative;
 top: 5px;
 }

.menu-bar2-container{
 background:#a91717; 
 width: 100%;

 }

 .menu-bar2
  {
  height: 20px;
  width: 1050px;
  margin: 0px auto;
  }

.menu-bar2 a{
  color: white;
  border-right: 1px solid #bb4545;

  }

Answer 1

检查您的元素<h1>NEWS</h1>。它有一些额外的余量。您可以根据您的要求更新h1的保证金。

清除浮点数会导致HTML中出现空格

1 个答案: