Question

此搜索框应位于顶部栏的右侧。

**我想将此搜索框置于正确的位置，如udemy complete web dev 2.0 BBC-Clone css1讲座中所示。

这与udemy课程中显示的内容相同，但是我不明白为什么它在这里不起作用**

这门课程是来自udemy的Rob

#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;
}

.topbar-section {
  float: left;
  border-left: 1px solid #ccc;
  height: 100%;
  margin-left: 8px;
}

#signin-image {
  width: 25px;
  margin: 10px 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;
}

#searchbox {
  background-color: #a9a9a9;
  border: none;
  font-weight: bold;
  font-style: 14px;
  padding: 5px;
  margin: 5px 0 5px;
  float: left;
}

#magnifying-glass {
  height: 27px;
  margin-top: 5px;
}

.clear {
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Technology:BBC-News</title>
</head>

<body>

  <div id="topbar">

    <img id="logo" src="images/bbc-logo.png" alt="">

    <div id="signin-div" class="topbar-section">

      <img id="signin-image" src="images/signinimage.png" alt="">

      <span id="signin-text">Sign in</span>

    </div>


    <div id="bell-div">
      <img id="wigglyline" src="images/wigglyline.png" alt="">

      <img id="bell" src="images/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">
      More

      <img id="more-arrow" src="images/more-arrow.png" alt="">
    </div>


    <div class="topbar-section">

      <input id="searchbox" type="text" placeholder="Search">

      <input type="image" id="magnifying-glass" src="images/search.png" alt="">

    </div>


  </div>

  <div class="clear"></div>



</body>

</html>

Answer 1

将两个输入都包装在div中，如下所示：

    <div id="search_icon">
        <input id="searchbox" type="text" placeholder="Search">

        <input type="image" id="magnifying-glass" src="images/search.png" alt="">
    </div>

我决定给div一个名为search_icon的ID。

将以下CSS添加到您的样式

 #search_icon{
 position: relative;
 }

 #searchbox{
 width: 100%;
 }

 #magnifying-glass{
 position: absolute;
 top: 0;
 right 0;
 width: 25px;
 height: 26px;
 background-color: #a9a9a9;
 }

Answer 2

最好使用背景短手，

  #searchbox {
      background: #0db9f0 url('magnifier.png') center right no-repeat;
      border: none;
      font-weight: bold;
      font-style: 14px;
      padding: 5px;
      margin: 5px 0 5px;
      float: left;
    }

我的搜索框出了什么问题？

2 个答案: