输入文本框移动到新行

时间:2018-03-21 01:07:34

标签: javascript html css css-float

关于将文本框移回其原始分区,我似乎遇到了问题。每次我把搜索栏放回那个区域。我试图制作BBC新闻网站,但似乎无效。

当我尝试将搜索栏放在正确的区域时,会将其移动到新行。

It moves it into a new line.

我希望它看起来像BBC News website.

上的栏



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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您需要在width中添加更多nav-bar,因此所有div都可以适合它。尝试放1040px

答案 1 :(得分:0)

要么你可以增加宽度

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

或(如果您不想增加宽度)

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

试试这些