如何保证 header 随水平页面展开而浮动？

Question

怎样才能得到

News

与页面水平扩展而不是保持在左侧？

<!doctype html> <html> <head> <title>Technology - BBC News</title> <style type="text/css"> #topbar {
  width: 1050px;
  margin: 0 auto;
  height: 40px;
}
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}
#logo {
  margin-top: 8px;
  width: 100px;
  float: left;
  margin-right: 8px;
}
.topbar-section {
  float: left;
  border-left: 1px #CCCCCC solid;
  height: 100%;
}
#signin-image {
  width: 25px;
  margin: 11px 15px;
  float: left;
}
#signin-text {
  font-weight: bold;
  font-size: 90%;
  position: relative;
  top: 14px;
  padding-right: 50px;
}
#wigglyline {
  float: left;
  height: 40px;
}
#bell {
  height: 25px;
  margin: 9px 8px 0 8px;
}
#bell-div {
  float: left;
}
.topbar-menu {
  font-weight: bold;
  font-size: 90%;
  padding: 13px 15px 0 15px;
  height: 27px;
}
#more-arrow {
  width: 16px;
  margin-left: 20px;
}
#searchbox {
  background-color: #d3d3d3;
  border;
  none;
  font-weight: bold;
  font-size: 12px;
  padding: 5px;
  margin: -4px 0 5px;
  float: left;
}
#magnifying-glass {
  height: 27px;
  margin-top: -4px;
}
.clear {
  clear: both;
}
#menu-bar-container {
  background-color: #9e2c25;
  width: 100%;
  height: 70px;
  margin: 0 auto;
}
#menubar {
  width: 1050px;
  margin: 0 auto;
}
h1 {
  padding: 10px;
  margin: 0 auto;
  color: white;
  font-size: 40px;
  font-weight: normal;
  text-align: justify;
  text-align-last: justify
}
</style> </head>

<body>

  <div id="topbar">

    <img id="logo" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\bbc-logo.png"></img>

    <div id="signin-div" class="topbar-section">

      <img id="signin-image" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\signinimage.png"></img>

      <span id="signin-text">Sign in</span>

    </div>

    <div id="bell-div">

      <img id="wigglyline" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\squiggle.png">

      <img id="bell" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\bell.png">

    </div>

    <div class="topbar-section topbar-menu">

      News

    </div>

    <div class="topbar-section topbar-menu">

      Sports

    </div>

    <div class="topbar-section topbar-menu">

      Weather

    </div>

    <div class="topbar-section topbar-menu">

      iPlayer

    </div>

    <div class="topbar-section topbar-menu">

      TV

    </div>


    <div class="topbar-section topbar-menu">

      More

      <img id="more-arrow" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\downarrow.png">

    </div>

    <div class="topbar-section topbar-menu">

      <input id="searchbox" type="text" value="Search">

      <input type="image" id="magnifying-glass" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\magnifying-glass.png">

    </div>
  </div>


  <div class="clear"></div>

  <div id="menu-bar-container">


    <div id="menu-bar">

      <h1>News</h1>


    </div>





  </div>









</body>

</html>

我已附加并更新了 div 上方的搜索栏，其中包含红色背景和新闻 header。水平展开浏览器页面时，您应该能够看到搜索栏如何反应并继续随页面流动，而新闻 header 仍位于页面左侧。

如果我需要以不同方式关闭 div 或改变定位，请告诉我。

本质上，我正在尝试让网站像这样运行：请遵循 link http://www.completewebdevelopercourse.com/content/2-css/bbc.html

Answer 1

您刚刚在 css 中忘记了破折号 (-)。它应该 #menu-bar 而不是 #menubar.

#topbar {
  width: 1050px;
  margin: 0 auto;
  height: 40px;
}
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}
#logo {
  margin-top: 8px;
  width: 100px;
  float: left;
  margin-right: 8px;
}
.topbar-section {
  float: left;
  border-left: 1px #CCCCCC solid;
  height: 100%;
}
#signin-image {
  width: 25px;
  margin: 11px 15px;
  float: left;
}
#signin-text {
  font-weight: bold;
  font-size: 90%;
  position: relative;
  top: 14px;
  padding-right: 50px;
}
#wigglyline {
  float: left;
  height: 40px;
}
#bell {
  height: 25px;
  margin: 9px 8px 0 8px;
}
#bell-div {
  float: left;
}
.topbar-menu {
  font-weight: bold;
  font-size: 90%;
  padding: 13px 15px 0 15px;
  height: 27px;
}
#more-arrow {
  width: 16px;
  margin-left: 20px;
}
#searchbox {
  background-color: #d3d3d3;
  border;
  none;
  font-weight: bold;
  font-size: 12px;
  padding: 5px;
  margin: -4px 0 5px;
  float: left;
}
#magnifying-glass {
  height: 27px;
  margin-top: -4px;
}
.clear {
  clear: both;
}
#menu-bar-container {
  background-color: #9e2c25;
  width: 100%;
  height: 70px;
  margin: 0 auto;
}
#menu-bar {  /* Change this line! */
  width: 1050px;
  margin: 0 auto;
}
h1 {
  padding: 10px;
  margin: 0 auto;
  color: white;
  font-size: 40px;
  font-weight: normal;
  text-align: justify;
  text-align-last: justify
}

<div id="topbar">

  <img id="logo" src="http://www.completewebdevelopercourse.com/content/2-css/images/bbc-logo.png">

  <div id="signin-div" class="topbar-section">

    <img id="signin-image" src="http://www.completewebdevelopercourse.com/content/2-css/images/signinimage.png">
    <span id="signin-text">Sign in</span>
  </div>
  <div id="bell-div">
    <img id="wigglyline" src="http://www.completewebdevelopercourse.com/content/2-css/images/wigglyline.png">
    <img id="bell" src="http://www.completewebdevelopercourse.com/content/2-css/images/bell.png">
  </div>
  <div class="topbar-section topbar-menu">

    News

  </div>

  <div class="topbar-section topbar-menu">

    Sports

  </div>

  <div class="topbar-section topbar-menu">

    Weather

  </div>

  <div class="topbar-section topbar-menu">

    iPlayer

  </div>

  <div class="topbar-section topbar-menu">

    TV

  </div>


  <div class="topbar-section topbar-menu">

    More

    <img id="more-arrow" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\downarrow.png">

  </div>

  <div class="topbar-section topbar-menu">

    <input id="searchbox" type="text" value="Search">

    <input type="image" id="magnifying-glass" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\magnifying-glass.png">

  </div>
</div>


<div class="clear"></div>

<div id="menu-bar-container">


  <div id="menu-bar">

    <h1>News</h1>


  </div>





</div>

如何保证 header 随水平页面展开而浮动？

How to ensure the header floats with horizontal page expansion?

html

css

margin

floating-accuracy

News