我一直在尝试为我的CSS代码添加边距和填充,但它似乎相互重叠,并且不能按要求工作。
#logodiv{
padding:5px;
float:left;
border-right: 1px solid #990000;
padding-right:10px;
}
#signindiv{
font-weight:bold;
height:35px;
font-size:0.9em;
float:left;
border-right: 1px solid #990000;
padding:0 15px 0 15px;
}
#signindiv img{
position:relative;
top:3px;
}
#topmenudiv{
float:left;
height:42px;
}
#topmenu ul{
margin:0;
padding:0;
border-right: 1px solid #990000;
}
一直试图重新调整下面的位置,但它没有按照我想要的方式定位。
#topmenudiv li{
list-style:none;
font-weight: bold;
font-size:0.9em;
border-right: 1px solid #990000;
padding:0 15px 0 20px;
height:25px;
float:left;
}
#searchdiv{
float:left;
padding:5px 0 0 10px;
}
#searchdiv input{
height:25px;
border:none;
padding-left:10px;
font-size:0.9em;
background-image:url("images/magnify.png");
background-repeat:no-repeat;
background-size:15px 15px;
background-position:right center;
}
.break{
clear:both;
}
#newsbar{
background-color: #990000;
width:100%;
height:80px;
color:white;
}
这是HTML代码:
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc-logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
</div>
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth"></div>
</div>
</div>
好的.topbar div分隔每个#topmenudiv的边框向下延伸,但实际上它们应该直接在边框高度结束的地方结束,加上#newsbar id和.topbar div之间有一个空格。这就是我的问题所在。