Как удалить границу между центрированным тегом поиска и выбрать тег

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

Heres в JSFiddle я сделал https://jsfiddle.net/ayt9q75e/1/

Answer 1

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

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

Answer 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 не нужно больше.

Answer 4

Fiddle: 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 = «центр»

Answer 5

Существует простой способ добавить класс родительского DIV и установить font-size:0; это исправить вашу проблему

div { 
    font-size:0; 
}