搜索在搜索框中

Question

我想要實現在搜索框內搜索按鈕，我發現它有用裏面按鈕：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; 
} 

code

Answer 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> 

Check this out

Answer 2

看看這個：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; 
}