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

问题描述：

如何删除搜索空间input box和go button之间的空格？我准备了jsfiddle代码示例。链接 - jsFiddle 如何删除表单元素之间的空白空间

截图：
enter image description here
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; 
}

预先感谢您。

尝试使用float：left;对于所有元素 – PSR 2014-09-30 11:49:56

尝试过，仍然会有1-2 px的差距，所以这不是一个可行的解决方案。 – ummahusla 2014-09-30 11:50:44

http://jsfiddle.net/2nwp36nj/1/ – PSR 2014-09-30 11:50:53

答

您可以尝试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>

仍然存在差距，但我需要让它们彼此粘在一起。 – ummahusla 2014-09-30 11:53:58

@Tibbers，我已更新我的帖子 – Arvind 2014-09-30 11:55:14

负余量左看起来更像是一个转弯而非真正的解决方案，可能会在不同的浏览器上产生不同的结果。 – 2014-10-08 04:02:38

答

与形式提出了这样一个按钮，然后她一起DEMO

<form class="form-wrapper cf"> 
    <input type="text" placeholder="search" required> 
    <button type="submit">GO</button> 
</form> 


.cf:before, .cf:after{ 
    content:""; 
    display:table; 
} 

.cf:after{ 
    clear:both; 
} 

.cf{ 
    zoom:1; 
}  


.form-wrapper { 
    width: 450px; 
    padding: 15px; 
    margin: 150px auto 50px auto; 
    background: #444; 
    background: rgba(0,0,0,.2); 
    border-radius: 10px; 
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); 
} 



.form-wrapper input { 
    width: 330px; 
    height: 20px; 
    padding: 10px 5px; 
    float: left;  
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
    border: 0; 
    background: #eee; 
    border-radius: 3px 0 0 3px;  
} 

.form-wrapper input:focus { 
    outline: 0; 
    background: #fff; 
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset; 
} 

.form-wrapper input::-webkit-input-placeholder { 
    color: #999; 
    font-weight: normal; 
    font-style: italic; 
} 

.form-wrapper input:-moz-placeholder { 
    color: #999; 
    font-weight: normal; 
    font-style: italic; 
} 

.form-wrapper input:-ms-input-placeholder { 
    color: #999; 
    font-weight: normal; 
    font-style: italic; 
}  


.form-wrapper button { 
    overflow: visible; 
    position: relative; 
    float: right; 
    border: 0; 
    padding: 0; 
    cursor: pointer; 
    height: 40px; 
    width: 110px; 
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
    color: #fff; 
    text-transform: uppercase; 
    background: #d83c3c; 
    border-radius: 0 3px 3px 0;  
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); 
} 

.form-wrapper button:hover{  
    background: #e54040; 
} 

.form-wrapper button:active, 
.form-wrapper button:focus{ 
    background: #c42f2f; 
    outline: 0; 
} 

.form-wrapper button:before { 
    content: ''; 
    position: absolute; 
    border-width: 8px 8px 8px 0; 
    border-style: solid solid solid none; 
    border-color: transparent #d83c3c transparent; 
    top: 12px; 
    left: -6px; 
} 

.form-wrapper button:hover:before{ 
    border-right-color: #e54040; 
} 

.form-wrapper button:focus:before, 
.form-wrapper button:active:before{ 
     border-right-color: #c42f2f; 
}  

.form-wrapper button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

还是有差距，但我需要让它们互相粘在一起。 – ummahusla 2014-09-30 11:54:24

答

添加float:left你.FORM搜索输入元素

例如：http://jsfiddle.net/2nwp36nj/2/

#search_mini { 
 
    width: 268px; 
 
} 
 
.form-search input { 
 
    border-color: #7d7c7c; 
 
    height: 30px; 
 
    width: 150px; 
 
    padding:0; 
 
    float: left; 
 
} 
 
.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; 
 
}

<div class="blablabla"> 
 
    <form id="search_mini" action="#" method="get" _lpchecked="1"> 
 
     <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> 
 
</div>

仍然存在差距，但我需要让它们彼此粘在一起。 – ummahusla 2014-09-30 11:55:07

我没有看到任何差距。他们完全一致。如果你想要的元素重叠，你应该添加一个负边界左边。 – 2014-09-30 11:55:37

答

使用浮动放置两个元件输入和按钮也需要给出按钮的宽度为好。它看起来像在下面的代码中工作。

http://jsfiddle.net/2nwp36nj/3/

#search_mini { 
    width: 368px; 
} 
.form-search input, .form-search button { 
    border-color: #7d7c7c; 
    height: 30px; 
    width: 150px; 
    padding:0; 
    float: left; 
} 
.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; 
}

答

只需添加到您的元素：

.form-search input, 
.form-search button.button 
{ 
    display: block; 
    float: left; 
}

你的空间实际上是由于空白。

答

另一个工作解决方案：您必须在input标记和button标记之间插入注释。像这样：

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

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

相关推荐