HTML和CSS：定位和/或浮动问题？

我遇到清理浮动块的问题（可能是别的？）。我想让#newsbar div从前面的浮点数中清除。所以，它的宽度可以在整个页面/浏览器中扩展100％HTML和CSS：定位和/或浮动问题？

我想我已经做了我所能做的，并且对此变得非常沮丧。这是它看起来像现在：

电流输出：

如果有人可以查看我的HTML和CSS，我会非常感激。谢谢！

HTML & CSS代码：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Rob's BBC</title> 
     <meta charset="UTF-8" /> 
     <meta name="viewport" content="width=device-width; initial-scale=1" /> 
<style type="text/css"> 

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

    #topbar { 
     background-color:#7A0000; 
     width: 100%; 
     height: 45px; 
     color: #FFFFFF; 
    } 

    .fixedwidth { 
     width: 1050px; 
     margin: 0 auto; 
     /* background-color: green; */ 
    } 

    /* BBC Logo */ 
    #logodiv { 
     padding-top: 8px; 
     float: left; 
     border-right: 1px solid #990000; 
     padding-right: 15px; 
    } 

    /* Sign In Text */ 
    #signindiv { 
     font-weight: bold; 
     font-size: 0.9em; 
     float: left; 
     padding: 5px 50px 8px 8px; 
     border-right: 1px solid #990000; 
    } 

    /* Sign In Image */ 
    #signindiv img { 
     position: relative; 
     float: left; 
     margin: 6px 0 0 2px; 
    } 

    #signindiv p { 
     float: left; 
     margin: 10px 0 0 4px; 
    } 

    #topmenudiv { 
     float: left; 
    } 

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

    #topmenudiv li { 
     list-style-type: none; 
     font-weight: bold; 
     font-size: 0.9em; 
     border-right: 1px solid #990000; 
     height: 100%; 
     padding: 15px 20px 10px 20px; 
     text-align: center; 
     float: left; 
    } 

    #searchdiv { 
     float: left; 
     padding: 7px 0 0 10px; 
    } 

    #searchdiv input { 
     height: 25px; 
     border: none; 
     font-size: 0.9em; 
     padding-left: 5px; 
     padding-right: 22px; 
     background-image:url('images/magnifyglass.png'); 
     background-repeat: no-repeat; 
     background-position: right center; 
    } 

    .break { 
     clear: both; 
    } 

    #newsbar { 
     background-color:#990000; 
     width: 100%; 
     height: 45px; 
     color: #FFFFFF; 
    } 
    </style> 
    </head> 
    <body> 


    <div id="container"> 
     <div id="topbar"> 
      <div class="fixedwidth"> 
       <div id="logodiv"> 
        <img src="images/bbclogo.png" alt="bbclogo" height="28" /> 
      </div> <!-- logodiv --> 
      <div id="signindiv"> 
       <img src="images/signinlogo.png" alt="signinlogo" /> 
       <p>Sign In</p> 
      </div> <!-- signindiv --> 
      <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> <!-- topmenudiv --> 

      <div id="searchdiv"> 

       <input type="text" placeholder="search" /> 

      </div> <!-- searchdiv --> 

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

      <div id="newsbar"> 

       <div class="fixedwidth"> 

       </div> 

      </div> <!-- newsbar --> 


      </div> <!-- fixedwidth --> 
     </div> <!-- topbar --> 

    </div> <!-- container --> 


    </body> 
    </html>

的jsfiddle：http://jsfiddle.net/1f030av9/

来源

2014-09-12 user3385997

请发送页面链接或jsfiddle请。 – 2014-09-12 17:08:00

我该怎么做？ – user3385997 2014-09-12 17:09:58

要么这是对学生的教训，要么是昨天发布的东西的复制品。所讨论的div是在一个固定宽度的容器内，所以它不会扩展，除非它被移出它。 – Christina 2014-09-12 17:15:01

好，无浮问题，你只需要拿到<div>之外的它的父（另一<div>与类名 “固定宽度”）。还删除了一些填充，以使搜索栏不会转到第二行。

更改CSS：

#searchdiv { 
    float: left; 
    padding: 7px 0 0 10px; 
}

变成了：从#searchdiv input

#searchdiv { 
    float: left; 
    padding: 7px 0 0 0px; 
}

删除线padding-right: 22px;这里有一个fiddle。

来源

2014-09-12 17:12:13

谢谢！那么，基本上它是它自己的父母？喜欢，只是从原始的父div中拿出来？ – user3385997 2014-09-12 17:15:14

谢谢你指出，Hristo Valkanov！ – user3385997 2014-09-12 17:22:44

您的<div class="fixedwidth">设置为1050px的宽度;而你的div class="newsbar">是class="fixedwidth"的子女。你设置“newsbar”至100％，但它不能覆盖父DIV class="fixedwidth“的属性

来源

2014-09-12 17:14:13 Arty

您fiddle

它为我

它延伸到100%

与虽然

#newsbar { 
    background-color:#990000; 
    width: 100%; 
    height: 45px; 
    color: #FFFFFF; 
    clear:both; 
} 

#searchdiv { 
    float: left; 
    padding: 7px 0 0 0px; 
}

删除轻微的修改不涉及您的问题210太#searchdiv input太

来源

2014-09-12 17:15:07

谢谢Sajad Lfc！ – user3385997 2014-09-12 17:23:19

HTML和CSS：定位和/或浮动问题？

回答

相关问题