输入文本框移动到新行

Question

关于将我的文本框移回其原始分区，我似乎遇到了问题。每次我把搜索栏放回那个区域。我正在尝试制作 BBC 新闻网站，但它似乎不起作用。

当我尝试将搜索栏放置在正确的区域时，它会移到新的一行中。

上的栏

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
}

#nav-bar {
  width: 1000px;
  margin: 0 auto;
  height: 40px;
  background-color: inherit;
  /* NOTE: Temporary color untill logo is adjusted. */
}

#logo {
  margin: 10px 8px 10px 10px;
  width: 100px;
  float: left;
}

#signin-image {
  width: 25px;
  margin: 13px 10px;
  float: left;
}

#signin-text {
  font-weight: bold;
  font-size: 90%;
  position: relative;
  top: 16px;
  padding-right: 50px;
}

#divider-alt {
  float: left;
  height: 40px;
}

#bell-div {
  float: left;
}

#bell {
  height: 25px;
  margin: 10px 10px;
}

.topbar-section {
  float: left;
  border-left: 1px #cccccc solid;
  height: 100%;
}

.topbar-menu {
  font-weight: bold;
  font-size: 90%;
  padding: 13px 15px 0px 15px;
  height: 27px;
}

#more-arrow {
  width: 16px;
  margin-left: 15px;
}

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

#magnifying-glass {
  height: 27px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Technology - BBC News</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="nav-bar">
    <img id="logo" src="img/bbc-logo.png">
    <div id="sign-in" class="topbar-section">
      <img id="signin-image" src="img/signin-icon.png" alt="">
      <span id="signin-text">Sign in</span>
    </div>
    <div id="bell-div">
      <img id="divider-alt" src="img/divider-alt.png" alt="">
      <img id="bell" src="img/bell.png" alt="">
    </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">
      Radio
    </div>
    <div class="topbar-section topbar-menu">
      <span>More</span>
      <img src="img/more-arrow.png" id="more-arrow">
    </div>
    <div class="topbar-section topbar-menu">
      <input id="search-box" type="text" value="Search">
      <img id="magnifying-glass" src="img/search.png" alt="">
    </div>
  </div>

  <div id="mid-bar">

  </div>

  <div id="news-anchor">

  </div>
</body>

</html>

Answer 1

您需要在 nav-bar 中再放一些 width，这样所有 div 都能放得下。试试把 1040px.

Answer 2

要么你可以增加宽度

#nav-bar {
    width: 1020px;
    ........

或（如果您不想增加宽度）

.topbar-menu {
.........
padding:15px 13px 0px 13px
.........}

试试这些

输入文本框移动到新行

input Text box move to new line

html

javascript

css

css-float