html - 怎么把搜索框放在栏里
问题描述
我想把“文本类型输入”放在图标所在的栏中,我该怎么做?
这是整个代码:
<!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>
推荐阅读
- java - Java:具有泛型类型的可变参数与泛型类型的数组
- xml - SSIS:Foreach 节点列表枚举器
- authentication - 会话状态超时代码在 web.config 中不起作用
- python - 在 Python、R 或 Stata 中从 DCC Garch 开发 DECO-Garch 模型(等相关)
- c++ - 如何为__index是函数的Lua类实现继承?
- database - 当从不同的路由调用时,一个类别的 Loopback4 模型具有不同的属性
- kubernetes-helm - Helm 3.6.1 无法从经过身份验证的存储库中获取(未经授权)
- mysql - 如何优化 ubuntu 上 mysql 服务器的内存使用?
- javascript - Vue 两种方式数据绑定到 Modal 组件和 prop 更新
- javascript - 将参数传递给视图中的操作