html - 如何删除表单元素之间的空白

如何删除搜索input box和go button之间的空白？我已经用代码示例准备了jsfiddle。链接-jsFiddle

屏幕截图：

HTML：

<div class="blablabla">
<form id="search_mini" action="#" method="get">
    <div class="form-search">
        <!--<label for="search"></label>-->
        <input id="search" value="SEARCH" type="text" name="q" class="input-text" maxlength="128" autocomplete="off">
        <button type="submit" title="GO" class="button"><span><span>GO</span></span>
        </button>
        <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
    </div>
</form>

CSS：

#search_mini {
    width: 268px;
}
.form-search input {
    border-color: #7d7c7c;
    height: 30px;
    width: 150px;
    padding:0;
}
.form-search button.button {
    background: url(../images/bg.gif) 0 0 repeat-x;
    font-size: 12px;
    text-align: center;
    padding: 0;
    height: 36px;
    min-width: 84px;
}

先感谢您。

最佳答案

您可以尝试margin-left：

#search_mini {
  width: 268px;
}
.form-search input {
  border-color: #7d7c7c;
  height: 30px;
  width: 150px;
  padding: 0;
}
.form-search button.button {
  background: url(../images/bg.gif) 0 0 repeat-x;
  font-size: 12px;
  text-align: center;
  padding: 0;
  height: 36px;
  min-width: 84px;
  margin-left: -4px;/* put as your need */
}

<div class="blablabla">
  <form id="search_mini" action="#" method="get">
    <div class="form-search">
      <!--<label for="search"></label>-->
      <input id="search" value="SEARCH" type="text" name="q" class="input-text" maxlength="128" autocomplete="off">
      <button type="submit" title="GO" class="button"><span><span>GO</span></span>
      </button>
      <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
    </div>
  </form>