我想在搜索框中实现搜索按钮,我发现它很有用:Search button inside the search box like Bing
但是当我将代码放入我的网站时,它没有显示预期的方式,出了什么问题?
这是代码
HTML
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
CSS
#q, #b {
margin: 0
}
#q {
padding 5px;
font-size: 2em;
line-height: 30px
}
#b {
/* image replacement */
text-indent: -99999px;
width: 30px;
height: 30px;
display: block;
background: gray url(button.png) 0 0 no-repeat;
}
答案 0 :(得分:1)
试试这个
#q, #b {
margin: 0
display:inline-block;
float:left;
}
#q {
padding 5px;
font-size: 2em;
line-height: 30px;
border:none;
}
#b {
/* image replacement */
margin-top:8px;
width: 30px;
height: 30px;
background: gray url(button.png) 0 0 no-repeat;
}
.border {
border:#ccc solid 1px;
width:390px;
}
.clear {
clear:both;
}
<div class="border">
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
<div class="clear"></div>
</div>
答案 1 :(得分:1)
看看这个:demo
HTML:
<div>
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
</div>
CSS:
#q, #b {
margin: 0
}
#q {
padding 5px;
font-size: 2em;
padding-left:50px;
line-height: 30px
}
#b {
/* image replacement */
text-indent: -99999px;
width: 30px;
height: 30px;
display: block;
position:absolute;
top:4px;
left:4px;
background: gray url(button.png) 0 0 no-repeat;
/* placing next to input using float or absolute positioning omitted ... */
}
div{
position:relative;
}