google-chrome - 你能找到这个 html/css 代码中的错误吗？

Question

结果在 Edge 中应该是这样的:

这是在 Chrome 中呈现时的样子；您可能会注意到搜索框放错了位置，在类别栏下方的一行中:

原始代码:

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

我不会切换浏览器，我需要一个解决方案来保持运行 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>