我想将“文本类型输入”放在图标所在的栏中，我该怎么办？
这是整个代码：
<!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>