个人中心
gpt4 book ai didi

html - 怎么把搜索框放到搜索栏里

转载 作者：行者123 更新时间：2023-11-27 23:40:20 24 4
gpt4 key购买 nike

我想把“文本输入法”放在图标所在的栏中，我该怎么做？？

这里是完整的代码:

<!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)。我尝试了一些正常的方法，但似乎有些事情我不知道!!

最佳答案

您可能希望执行以下操作

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>

关于html - 怎么把搜索框放到搜索栏里，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57066500/

24 4 0
文章推荐： html - css 原地旋转一个div 180度
文章推荐： C++ 继承 - 无法在 cpp 文件中定义方法
文章推荐： c++ - 读取文件c++的最快方法
文章推荐： html - 为什么这个超链接不能像这里写的那样工作？