HTML和CSS：定位和/或浮動問題？

Question

我在清理浮子時遇到問題（可能還有其他問題嗎？）。 我想將#newsbar div從先前的浮動中清除。 因此，它的寬度可以在整個頁面/瀏覽器中擴展100％

我想我已經盡力了，對此我感到非常沮喪。 這是當前的樣子：

電流輸出：

如果有人可以查看我的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/

Answer 1

好的，沒有浮動問題，您只需將<div>置於其父級之外（另一個<div> ，其類名為“ fixedwidth”）。 還刪除了一些填充，以使搜索欄不轉到第二行。

更改了CSS：

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

變成了：

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

刪除padding-right: 22px;行padding-right: 22px; 來自#searchdiv input

這是一個小提琴。

Answer 2

您的<div class="fixedwidth">設置為1050px的寬度； 並且您的div class="newsbar">是class="fixedwidth"的子class="fixedwidth" 。 您已將'newsbar'設置為100％，但它不能覆蓋父div class="fixedwidth ”的屬性。

Answer 3

你的小提琴

這個對我有用

延伸到100%

略作修改，但與您的問題無關

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

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

也從#searchdiv input也刪除了padding-right

HTML和CSS：定位和/或浮動問題？

問題描述

3 個解決方案

解決方案1
3 2014-09-12 17:12:13

解決方案2
1 2014-09-12 17:14:13

解決方案3
0 2014-09-12 17:15:07

HTML和CSS：定位和/或浮動問題？

問題描述

3 個解決方案

解決方案1 3 2014-09-12 17:12:13

解決方案2 1 2014-09-12 17:14:13

解決方案3 0 2014-09-12 17:15:07

解決方案1
3 2014-09-12 17:12:13

解決方案2
1 2014-09-12 17:14:13

解決方案3
0 2014-09-12 17:15:07