如何删除居中输入搜索标签和选择标签之间的边距答案

【问题标题】：How to remove margin between centered input search tag and select tag如何删除居中输入搜索标签和选择标签之间的边距
【发布时间】：2016-12-02 11:13:56
【问题描述】：

我无法删除居中输入 type="search" 和下拉选择标签之间的空格。这里使用的 html 和 css

<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>

div {
margin: 0;
}
input {
margin: 0;
}
select {
margin: 0;
padding-left:0;
}

这是我制作的 JSFiddle https://jsfiddle.net/ayt9q75e/1/

【问题讨论】：

我对您的代码进行了一些更改，但它会出现在左侧，这样可以吗？
@Swordys，它不会工作

标签： html css tags

【解决方案1】：

If I understand you properly :https://jsfiddle.net/ayt9q75e/3/

【讨论】：

【解决方案2】：

* {
    padding: 0;
    margin: 0;
}
div {
    font-size: 0;
    line-height: 0;
}
input {
    display: inline-block;

<!-- begin snippet: js hide: false console: true babel: false -->

<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>

    font-size: 14px;
    line-height: 22px;
}
select {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
}

【讨论】：

【解决方案3】：

在您当前的代码中，显然每行之间都有换行符。

在 HTML 中，换行符属于“空白”，因此它被呈现为空格。

你必须抑制这些换行符才能得到你想要的：

<div id="div" align="center">
<input id="search" type="search" ><span id="span"><select>
<option value="all">All Catigories</option><option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select></span>
</div>

请注意，您不再需要像 margin: 0 这样的东西了。

【讨论】：

【解决方案4】：

小提琴：https://jsfiddle.net/ayt9q75e/2

HTML：

<div id="div" align="center">
   <input id="search" type="search"><span id="span">
      <select>
         <option value="all">All Catigories</option>
         <option value="test1">Test 1</option>
         <option value="test2">Test 2</option>
         <option value="test3">Test 3</option>
      </select>
   </span>
</div>

CSS：

div {
   margin: 0;
}
input {
   margin: 0;
   display: inline-block;
}
#span {
   display: inline-block;
}
select {
   margin: 0;
   padding-left:0;
}

重要提示：去掉之前的换行符

我建议使用 CSS 来使 div 内容居中而不是 align="center"

【讨论】：

【解决方案5】：

有一种简单的方法将一个类添加到父 div 并设置 font-size:0; 这将解决您的问题

div {
  font-size:0;
}

【讨论】：