Question

当红色条位于其正下方时，红色条与顶栏重叠，即使我将宽度设置为100％，它也不会在整个范围内延伸。我从topbardiv 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>

Answer 1

红色条嵌套在一个带有fixedwidth类的div中，毫不奇怪，它的固定宽度为1095px。所以红条的宽度只能是1095px。

要调试此类问题，只需在Chrome中查看，按F12，按Ctrl-Shift-C，然后单击要检查的元素即可。它将解释正在发生的事情。

Answer 2

一个问题是因为.fixedwidth的宽度为1095px所以你的div不能100％，因为它嵌套了100％= 1095px。

将.fixedwidth更改为此，

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

CODEPEN DEMO

CSS宽度不起作用

2 个答案: