无法清除新栏上的保证金 [英] Cannot clear margins on new bar

问题描述

我无法在我的新栏中清除我的边距我试图创建一个休息但是在左边和右边有一个轻微的白色显示我无法填充。如果您复制粘贴我的代码，您将看到我正在谈论的内容，因为有2个栏我创建了一个作为标题，下面的那个将是我的新闻提要栏但新闻提要栏根本没有完全覆盖在左边但是覆盖了右边。

 正文 {
  margin  ：  0;  
  font-family  ：  Arial，Helvetica，freesans，sans-serif;  
} 
 
 
＃ topbar  { 
  background-color  ：  black;  
  width  ：  100％;  
  height  ：  113px;  
 < span class =code-attribute> color  ：  white;  
} 
 
。 fixedwidth  {
  width  ：  1912px;  
  margin  ：  0 auto;  
} 
 
＃ logodiv  {
  padding-top  ：  0px;  
  float  ：  left;  
  border-right  ：  1px纯白;  
  padding-right  ： < span class =code-keyword> 10px;  
} 
 
＃ signindiv  {
 < span class =code-attribute> font-weight  ：  bold;  
  padding  ：  35px 100px;  
  margin  ：  0 auto;  
  font-size  ：  2em;  
  float  ：  left;  
  border-right  ：  1px纯白色;  
} 
 
＃ topmenudiv  {
  float  ：  left;  
} 
 
＃ topmenudiv   li  {
  list-style  ：  none;  
  font-weight  ： 粗体;  
  font-size  ：  2em;  
  float  ：  left;  
  padding  ：  35px 55px 220px 55px;  
  border-right  ：  1px纯白色;  
} 
 
＃ topmenudiv   ul  {
 < span class =code-attribute> margin  ：  0;  
 < span class =code-attribute> padding  ：  0;  
} 
 
＃ searchdiv  {
  float  ：  left;  
  padding  ：  35px;  
} 
 
＃ searchdiv  输入 {
  height  ：  25px;  
  width  ：  200px;  
  border  ： 无;  
  font-size  < span class =code-keyword>：  1.5em;  
  background-image  ：  url（../ images / search.png）;  
 < span class =code-attribute> background-repeat  ：  no-repeat;  
  background-position  ： 右中心;  
} 
 
。 break  {
  p添加底部 ：  112px;  
 清除 ：  both;  
} 
 
＃ newsbar  {
  background-color  ：  ＃505050;  
  width   ：  100％;  
  height  ：  100px;  
  color  ：  white;  
} 
 
 
<！doctype html> 
< html> 
< head> 
< title> Expedius < /   title  >  
 < link  rel =stylesheettype =text / csshref =CSS / Expedius.css
 
 < meta  charset =utf-8/> 
 < meta  http-equiv =Content-typecontent =text / html; charset = utf-8/> 
 < meta  name =viewportcontent =width = device-width，initial-scale = 1/> 
 < /   head  >  
 
< body> 
 < div  id =container> 
 < div  id =topbar> 
 < div  class =fixedwidth> 
 
 
 < div  id =logodiv> 
 
 < img  src =Images / Expedius  Logo  .jpgheight =250宽度250/> 
 
 < /   div   >  
 
 < div  id =signindiv> 
 
 < img  src =images / sign  in  .png/ > 签名 在 
 
 < /   div  >  
 
 < div  id =topmenudiv> 
< ul> 
< li>关于< /   li  >  
< li>博客< /   li  >  
< li>菜单< /   li  >  
< li>订单< /   li  >  
< li>地点< /   li  >  
 < ; /   ul  >  
 
 
 < span class =code-keyword>< /   div  >  
 
 < div  id =searchdiv> 
 < input  type =textplaceholder =Search/> 
 < /   div  >  
 
 < div  class =break> < /   div  >  
 < div  id =newsbar> 
 
 < /   div   >  
 < /   div  >  
 
 < /   body  >  
 < /   html  >  

再次左边有一个小差距右边的新闻栏，并没有直接坐在我的topbar下面，这让我头疼，可能是一个新手的错误，但只是找人指出来。

解决方案

< blockquote>尝试从正文或包含栏的对象中删除填充

I am having trouble clearing my margins in my "newbar" I tried creating a break but on the left and the right there is a slight "white" showing that I cannot pad out. If you copy paste my code you will see What I am talking about as there are 2 bars I created one being the header and the one under it which will be my news feed bar but the news feed bar simply does not completely cover from on the left side but does cover the right.

body {
    margin:0;
    font-family:Arial,Helvetica,freesans,sans-serif;
}


#topbar {
    background-color:black;
    width:100%;
    height:113px;
    color:white;
}

.fixedwidth {
    width:1912px;
    margin:0 auto;
}

#logodiv {
    padding-top:0px;
    float:left;
    border-right:1px solid white;
    padding-right:10px;
}

#signindiv {
    font-weight:bold;
    padding:35px 100px;
    margin:0 auto;
    font-size:2em;
    float:left;
    border-right:1px solid white;
}

#topmenudiv {
    float:left;
}

#topmenudiv li{
    list-style:none;
    font-weight:bold;
    font-size:2em;
    float:left;
    padding:35px 55px 220px 55px;
    border-right:1px solid white;
}

#topmenudiv ul{
    margin:0;
    padding:0;
}

#searchdiv {
    float:left;
    padding:35px;
}

#searchdiv input{
    height:25px;
    width:200px;
    border:none;
    font-size:1.5em;
    background-image:url("../images/search.png");
    background-repeat:no-repeat;
    background-position:right center;
}

.break {
    padding-bottom:112px;
    clear:both;
}

#newsbar{
    background-color:#505050;
    width:100%;
    height:100px;
    color:white;
}


<!doctype html>
<html>
<head>
    <title>Expedius</title>
    <link rel="stylesheet" type="text/css" href="CSS/Expedius.css"

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <div id="container">
        <div id="topbar">
            <div class="fixedwidth">


<div id="logodiv">

    <img src="Images/Expedius Logo.jpg" height="250" width"250"/>

</div>

<div id="signindiv">

    <img src="images/sign in.png"/> Sign In

        </div>

        <div id="topmenudiv">
<ul>
    <li>About</li>
    <li>Blog</li>
    <li>Menu</li>
    <li>Order</li>
    <li>Locations</li>
</ul>


        </div>

        <div id="searchdiv">
            <input type="text" placeholder="Search" />
        </div>

        <div class="break"></div>
        <div id="newsbar">

    </div>
</div>

</body>
</html>

And again there is a small gap on the left and right of the "newsbar" and it does not directly sit under my topbar which is causing me major headaches probably a rookie mistake but just looking for someone to point it out.

解决方案

Try to remove padding from body or the object containing the bar

这篇关于无法清除新栏上的保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！