Question

我无法删除居中输入类型=“搜索”和下拉选择标记之间的空格。这里的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/

Answer 1

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

Answer 2

＆＃13;

* {
    padding: 0;
    margin: 0;
}
div {
    font-size: 0;
    line-height: 0;
}
input {
    display: inline-block;

<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

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

＆＃13;

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

Answer 3

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

使用HTML，换行符属于＆＃34; white-spaces＆＃34;，因此它被渲染为空格。

你必须取消这些换行符才能得到你想要的东西：

＆＃13;

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

＆＃13;

请注意，您不再需要margin: 0之类的内容。

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

重要提示：在＆lt; span id =“span”＆gt;

之前删除换行符

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

Answer 5

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

div {
  font-size:0;
}

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

5 个答案: