如何讓input之間無空隙

做一個自己網站的首頁，一切都完工了，可以就是一個搜索的input框，讓我折騰了兩天都沒弄好，實在是郁悶至極，下面為搜索框的html代碼：

<form action="http://www.example.com/index/search" method="get">

                    <div>

                      <input name="keyword" id="s" value="" size="23" type="text" />

                      <input src="/Public/img/search-button.jpg" value="search" type="image" />

                    </div>

</form>

css代碼：

.search {

                    padding-top: 5px;

}

.search input{

                    vertical-align: top;

                    margin:0;

                    border:0;

}

.search #s {

                    padding: 0 1px 4px 5px;

                    background: url('search-bg.jpg') left top no-repeat;

                    width: 110px;

                    height: 28px;

}

出現如下圖的bug：

 

兩個input之讓有空隙，不是緊挨着的，而我要的就是將這個空隙去掉，找了很多種方法，以下是我嘗試的方法：

1. 使用絕對定位方式
   這種方法雖然能解決空隙問題，但是頁面的布局又因為這個搜索框的定位而變亂了。（丟棄）
2. 清除padding和margin
   我將兩個input的padding和margin都設為0，但是結果卻讓我失望，那個空隙還是存在。（丟棄）
3. 將圖像搜索按扭的padding值設為負數
   這個結果是請教了群的朋友說的，但是還是解決不了問題，負數只是讓圖片往左少了，但是不能解決空隙的問題。（丟棄）

經過了這三個嘗試無果的情況下，快要臨近崩潰的邊緣了，最后群里的另一個朋友看到我貼出的代碼， 要讓兩個input之間沒有空隙，則要讓兩個input在同一行，不能使用換行。

我最后抱着一線希望再去嘗試一下，將上面的html代碼改至如下：

<form action="http://www.example.com/index/search" method="get">

                    <div> 

                                         <input name="keyword" id="s" value="" size="23" type="text" /><input src="/Public/img/search-button.jpg" value="search" type="image" />

                    </div>

</form>

驚喜！完美解決了。

我要的就是這個結果，經過了兩天的戰斗，結束了再去尋找方法的長跑。