CSS边距和填充似乎不起作用

时间:2016-06-14 07:56:48

标签: html css3

我一直在尝试为我的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之间有一个空格。这就是我的问题所在。

0 个答案:

没有答案