Question

我想在图标所在的栏中添加“文本类型输入”，我该怎么办？

这是整个代码：

<!doctype html>
<html>
<head>
  <style>
    body{
      margin: 0px;
      padding: 0px;
    }
    #mostTop{
      height: 35px;
      background: url("img/_TopCampain1404303550.jpg");
    }
    #bar2{
      height: 35px;
      width: 100%;
      border-bottom : solid 1px #F2F2F2;

      float: left;
    }

    #bar2 > #AccountsBox{
      float: left;
      border-left :solid 1px #F2F2F2;
      width: 280px;
      height: 35px;
      margin-left: 100px;
    }
    #bar2 > #AccountsBox > .items{
      float: left;
    }
    #bar2 > #AccountsBox > .items{
      float: left;
      width: 45px;
      height: 35px;
      border-right:solid 1px #F2F2F2;
    }
    #bar2 > #AccountsBox > #twitter{
        background: url("img/twitter.png")no-repeat;
        background-size: 45px 35px;
      }
    #bar2 > #AccountsBox > #facebook {
       background: url("img/facebook.png")no-repeat;
      background-size: 45px 35px;
    }
    #bar2 > #AccountsBox > #googleplus{
      background: url("img/googleplus.png")no-repeat;
      background-size: 45px 35px;
    }
    #bar2 > #AccountsBox > #instagram {
      background: url("img/insta.png")no-repeat;
      background-size: 45px 35px;
    }
    #bar2 > #AccountsBox > #telegram{
      background: url("img/telegram.png")no-repeat;
      background-size: 45px 35px;
    }
    #bar2 > #AccountsBox > #aparat {
      background: url("img/aparat.png")no-repeat;
      background-size: 45px 35px;
    }

    #bar2 > #AccountsBox > #twitter:hover{
      transition: 0.25s;
      background: url("img/twitterHover.bmp")no-repeat;
      background-size: 45px 35px;
      cursor:pointer;
    }
    #bar2 > #AccountsBox > #facebook:hover {
      transition: 0.25s;
      background: url("img/facebookHover.bmp")no-repeat;
      background-size: 45px 35px;
      cursor:pointer;
    }
    #bar2 > #AccountsBox > #googleplus:hover{
      transition: 0.25s;
      background: url("img/googleplusHover.bmp")no-repeat;
      background-size: 45px 35px;
      cursor:pointer;
    }
    #bar2 > #AccountsBox > #instagram:hover {
      transition: 0.25s;
      background: url("img/instaHover.bmp")no-repeat;
      background-size: 45px 35px;
      cursor:pointer;
    }
    #bar2 > #AccountsBox > #telegram:hover{
      transition: 0.25s;
      background: url("img/telegramHover.bmp")no-repeat;
      background-size: 45px 35px;
      cursor:pointer;
    }
    #bar2 > #AccountsBox > #aparat:hover{
      transition: 0.25s;
      background: url("img/aparatHover.bmp")no-repeat;
      background-size: 45px 35px;
      cursor:pointer;
    }

    #bar2 > #search > #searchBox{
      height: 20px;
      margin-top: 0%;


    }
    #bar2 > #search > #magnifier{
      height: 35px;
      width: 45px;
      border-right: solid 1px #F2F2F2;
    }
  </style>
</head>
<body>

  <div id="mostTop"> </div>
  <div id="bar2">
    <div id="AccountsBox">
      <div id="twitter" class="items"></div>
      <div id="facebook" class="items"></div>
      <div id="googleplus" class="items"></div>
      <div id="instagram" class="items"></div>
      <div id="telegram" class="items"></div>
      <div id="aparat" class="items"></div>
    </div>
    <div id="search">
      <input type="text" placeholder="search..." id="searchBox">
      <input type="image" src="img/search.png" id="magnifier">
    </div>
  </div>
</body>
</html>

我只想将搜索框放在栏中（代码中该栏的名称为bar2）。我尝试了一些正常的方法，但似乎有些我不知道的东西！

Answer 1

您可能希望执行以下操作

input[type="text"]{
      height: 30px;
      font-size: 20px;
      background-image: url("https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png");
      background-repeat: no-repeat;
      background-size: 20px 20px;
      background-position-y: 50%;
      background-position-x: 5px;
      padding: 5px 5px 5px 40px;
    }

<form id="search" action="#" method="post">
  <input type="text" placeholder="search..." id="searchBox">
  <input type="submit" value="Search">
</form>

如何将搜索框放在栏中

1 个答案: