How to eliminate gaps between input and input

How to eliminate gaps between input and input

There are two inputs:

<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 code:

.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;}

 

The following is a bug:

There is a gap between the two inputs, not close to each other. All I need is to remove the gap and find many methods. The following are my methods:

• Absolute Positioning
  Although this method can solve the gap problem, the layout of the page becomes messy due to the location of the search box. (Discard)
• Clear padding and margin
  I set the padding and margin of the two inputs to 0, but the result disappointed me. The gap still exists. (Discard)
• Set the adjusted padding value for image search to a negative number.
  The result was answered by a group of friends, but the problem still could not be solved. The negative number only reduced the number of pictures to the left, but the gap problem could not be solved. (Discard)

After these three failed attempts, I was about to close to the verge of collapse. Finally, another friend in the Group saw the code I posted,To ensure that there is no gap between two inputs, the two inputs must be in the same row, and line breaks cannot be used..

I finally tried again with a glimmer of hope, and changed the above html code to the following:

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

Result !! Hahaha