如何让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>

惊喜！完美解决了。

我要的就是这个结果，经过了两天的战斗，结束了再去寻找方法的长跑。

 

转载于:https://www.cnblogs.com/mingjixiaohui/p/5278025.html