您可以在此html / css代码中找到错误吗？

Question

结果应该看起来像这样，它出现在Edge中：

这是在Chrome中呈现时的外观；您可能会注意到搜索框放错了位置，位于类别栏下方的行上：

原始代码：

请帮助我查找导致搜索框显示在下一行的错误。从头到尾我已经经历了几个小时，无法弄清楚为什么相同的代码在Edge中看起来很好，但在Chrome中却不行。

我不会切换浏览器，我需要一个解决方案来继续使用 铬。

#topbar {
  width: 1000px;
  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;
}

#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;
}

#search-box {
  background-color: #E4E4E4;
  border: none;
  font-weight: bold;
  font-size: 14px;
  padding: 5px;
  margin: 5px 0 5px 5px;
  float: left;
}

#magnifying-glass {
  height: 26px;
  margin-top: 5px;
}

.clear {
  clear: both;
}

#menu-bar-container {
  background-color: #BB1919;
  width: 100%;
  height: 100px;
}

#menu-bar {
  width: 1000px;
  margin: 0 auto;
}

h1 {
  padding: 0;
  margin: 0;
  color: white;
  font-size: 40px;
  font-weight: normal;
  padding-top: 10px;
}

<div id="topbar">
  <img id="logo" src="images/bbc-blocks-dark.png">
  <div id="signin-div" class="topbar-section">
    <img id="signin-image" src="images/signinimage.png">
    <span id="signin-text">Sign in</span>
  </div>
  <div id="bell-div">
    <img id="wigglyline" src="images/wigglyline.png">
    <img id="bell" src="images/bell.png">
  </div>
  <div class="topbar-section topbar-menu">
    News
  </div>
  <div class="topbar-section topbar-menu">
    Sport
  </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="images/more-arrow.png">
  </div>
  <div class="topbar-section">
    <input id="search-box" type="text" value="Search">
    <input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
  </div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
  <div id="menu-bar">
    <h1>NEWS</h1>
  </div>
</div>

Answer 1

这是因为您的容器的宽度不够大。如果您将#topbar的宽度设置为1100px，那么它将不会自动换行。

#topbar {
  width: 1100px;
  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;
}

#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;
}

#search-box {
  background-color: #E4E4E4;
  border: none;
  font-weight: bold;
  font-size: 14px;
  padding: 5px;
  margin: 5px 0 5px 5px;
  float: left;
}

#magnifying-glass {
  height: 26px;
  margin-top: 5px;
}

.clear {
  clear: both;
}

#menu-bar-container {
  background-color: #BB1919;
  width: 100%;
  height: 100px;
}

#menu-bar {
  width: 1000px;
  margin: 0 auto;
}

h1 {
  padding: 0;
  margin: 0;
  color: white;
  font-size: 40px;
  font-weight: normal;
  padding-top: 10px;
}

<div id="topbar">
  <img id="logo" src="images/bbc-blocks-dark.png">
  <div id="signin-div" class="topbar-section">
    <img id="signin-image" src="images/signinimage.png">
    <span id="signin-text">Sign in</span>
  </div>
  <div id="bell-div">
    <img id="wigglyline" src="images/wigglyline.png">
    <img id="bell" src="images/bell.png">
  </div>
  <div class="topbar-section topbar-menu">
    News
  </div>
  <div class="topbar-section topbar-menu">
    Sport
  </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="images/more-arrow.png">
  </div>
  <div class="topbar-section">
    <input id="search-box" type="text" value="Search">
    <input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
  </div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
  <div id="menu-bar">
    <h1>NEWS</h1>
  </div>
</div>

Answer 2

这是因为您已将ID顶栏的width属性设置为1000。搜索栏无法容纳（至少在chrome中，可能是由于默认浏览器空白）

将width属性设置为1050px即可解决问题。

#topbar {
  width: 1050px;
  margin: 0 auto;
  height: 40px;
}

It works!

Answer 3

哇，谢谢你，让我的大脑崩溃了 因为老师在课程中将其设置为1000px 我不明白我做错了什么 做完全一样 ：/