入力テキストボックスが新しい行に移動します

debugcn 投稿 Dev

マヒ

テキストボックスを元の分割に戻すことに関して問題があるようです。検索バーをその領域に戻すたびに。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>

Henrique Oecksler Bertoldi

すべてのdivがそれに収まるようwidthに、nav-barにもう少し入れる必要があります。入れてみてください1040px。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]