时间戳

首页 > 解决方案 > 你能在这个 html/css 代码中找到错误吗？

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

问题描述

结果应该是这样的，因为它出现在 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>

标签： google-chromebrowserhtmlcss

解决方案

这是因为你的容器的宽度不够大。如果您将#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>

推荐阅读