CSS寬度不起作用

當它應該在右下方時，紅條與頂條重疊，即使我將寬度設置爲100％，它也不會延伸到整個方向。我複製了topbardiv CSS中的CSS代碼，但仍然無法正常工作。CSS寬度不起作用

圖片：

代碼：

<head> 
    <title>Grace's WRAL</title> 
    <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"> 
    <style type="text/css"> 
    body { 
     margin:0; 
    } 
    #topbar { 
     background-color:#0C1F2F; 
     width:100%; 
     height:95px; 
    } 
    .fixedwidth { 
     width:1095px; 
     margin:0 auto; 
    } 
    #logodiv { 
     padding:10px 0 0 45px; 
     float:left; 
    } 
    #topmenudiv { 
    } 
    #topmenudiv ul { 
     background-color:none; 
     padding:8px 0 0 35px; 
     margin:0; 
     height:20px; 
    } 
    #topmenudiv li { 
     list-style:none; 
     color:#008ECD; 
     font-size:0.9em; 
     font-family:Gill Sans; 
     border-right:1px solid #008ECD; 
     padding: 0 6px 0 10px; 
     float:left; 
     background-color:none; 
    } 
    #alertdiv { 
     color:white; 
     float:right; 
     margin-top:-22px ! important; 
     padding:0 334px 0 334px; 
     font-size:0.9em; 
    } 
    #alertdiv p { 
     float:right; 
     margin-top:1px; 
     font-family:Gill Sans; 
     padding:0 5px 0 5px; 
    } 
    #signindiv { 
     color:white; 
     float:right; 
     margin-top:-22px ! important; 
     padding:0 271px 0 271px; 
    } 
    #signindiv p { 
     margin-top:1px; 
     font-size:14px; 
     font-family:Baskerville; 
     margin-top:-8px ! important; 
    } 
    #searchdiv { 
     float:right; 
     margin-top:-33px ! important; 
     padding:0 55px 0 55px; 
    } 
    #searchdiv input { 
     height:15px; 
     width:190px; 
     background-color:#093B51; 
     border:none; 
     font-size:0.9em; 
     padding:5px 6px 6px 5px; 
     background-image:url("file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Search_Icon.png"); 
     background-repeat:no-repeat; 
     background-position:right center; 
    } 
    #searchdiv input:focus { 
     background-color:#FFFFFF; 
    } 
    #searchdiv input::-webkit-input-placeholder { 
     color: white; 
     text-transform:none; 
     font-size:13px; 
     padding-left:5px; 
    } 
    #topicmenudiv { 
    } 

    #topicmenudiv ul { 
     background-color:none; 
     margin:0; 
    } 
    #topicmenudiv li { 
     list-style:none; 
     float:left; 
     color:white; 
     padding:15px 0 0 15px; 
     font-family:Gill Sans; 
     font-size:16px; 
    } 
    #currentweatherdiv { 
     float:right; 
     font-size:33px; 
     padding:8px 8px 0 0; 
     color:white; 
    } 
    #currentweatherdiv img { 
     float:right; 
     padding-top:4px; 
    } 
    #currentweatherimgdiv { 
     float:right; 
     padding:10px 50px 0 0; 
    } 
    .break { 
     clear:both; 
    } 
    #newsbardiv { 
     background-color:red; 
     width:100%; 
     height:95px; 
    } 
    </style> 
</head> 

<body> 
    <div id="container"> 
     <div id="topbar"> 
     <div class="fixedwidth"> 
     <div id="topmenudiv"> 
     <ul> 
      <li>Noticias</li> 
      <li>Instant Savings</li> 
      <li>Classifieds</li> 
      <li>Jobs</li> 
      <li style="border-right:none">Real Estate</li> 
     </ul> 
     </div> 
     <div id="alertdiv"> 
     <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Alert_Icon.png" /> <p>Alert</p> 
     </div> 
     <div id="signindiv"> 
      <p>Sign In</p> 
     </div> 
     <div id="searchdiv"> 
      <input type="text" placeholder="Search" /> 
     </div> 
     <div id="logodiv"> 
     <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/WRAL_logo.png" /> 
     </div> 
     <div id="topicmenudiv"> 
     <ul> 
      <li>News</li> 
      <li>Weather</li> 
      <li>Sports</li> 
      <li>Business</li> 
      <li>Consumer</li> 
      <li>Health & Life</li> 
      <li>Entertainment</li> 
      <li>Video</li> 
     </ul> 
     </div> 
      <div id="currentweatherimgdiv"> 
      <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Current_Weather.png" /> 
     </div> 
     <div id="currentweatherdiv"> 
      65 <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Degrees_Icon.png" /> 
     </div> 
     <div class="break"></div> 
     <div id="newsbardiv"> 
     <div class="fixedwidth"></div> 
     </div> 
     </div> 
    </div> 

</body> 
</html>

來源

2015-11-06 Augustmae

紅色條嵌套一個div內部與類fixedwidth，其意料之中具有1095px一個固定的寬度。所以紅色條的寬度只能是1095px。

要調試這樣的問題，只需在Chrome中查看它，按F12，按下Ctrl-Shift-C，然後單擊要檢查的元素。它將解釋發生了什麼。

來源

2015-11-06 23:39:21

有沒有什麼辦法可以做到這一點在Safari瀏覽器？我有一個mac，所以我沒有鉻。 – Augustmae

https://developer.apple.com/safari/tools/ –

另外，如何向下移動紅色條，使其不重疊？我嘗試了使用填充頂部和填充底部，但它只是增加了紅色條的高度。 – Augustmae

一個問題是因爲.fixedwidth的寬度爲1095px所以你的div不能100％，因爲它是嵌套的100％= 1095px。

變化.fixedwidth此，

.fixedwidth { 
    width:100%; 
    margin:0 auto; 
}

CODEPEN DEMO

來源

2015-11-06 23:40:12

CSS寬度不起作用

回答

相關問題