Question

我遇到清除浮动的问题（可能是别的什么？）。我想让#newsbar div从之前的浮动中清除。因此，它的宽度可以在页面/浏览器中扩展100％

我认为我已尽我所能，并且对此感到非常沮丧。这就是目前的情况：

当前输出：

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

HTML＆amp; 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/

Answer 1

好的，没有浮动问题，你只需要将<div>置于其父级之外（另一个<div>使用类名＆＃34; fixedwidth＆＃34;）。还删除了一些填充，以使搜索栏不会转到第二行。

更改了css：

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

变成了：

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

从padding-right: 22px;

中删除了行#searchdiv input

这里是fiddle。

Answer 2

您的<div class="fixedwidth">设置宽度为1050像素;而您的div class="newsbar">是class="fixedwidth"的孩子。你已经设置了＆＃39; newsbar＆＃39;为100％，但它不能覆盖父div class="fixedwidth＆＃34;

的属性

Answer 3

您的fiddle

它对我有用

它延伸至100%

虽然

有轻微的编辑与您的问题无关

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

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

也从padding-right删除了#searchdiv input

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

3 个答案: