Я хочу внедрить кнопку поиска внутри окна поиска, и я нахожу ее полезной: кнопка поиска внутри окна поиска, такого как 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;
}
Попробуй это
#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>
посмотрите на это: 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;
}