Как настроить мой Seach окно и кнопку поиска, чтобы иметь одинаковую высоту

Question

У меня есть следующий код внутри мой взгляд:

<form class="customSearch"method="GET" action="@Url.Action("Search", "Home")"> 
    <input class="searchInput" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text"/> 
    <input type="submit" value="Search" class="btn btn-primary"/> 
</form> 

Но результат в том, что у меня есть окно поиска & дно будучи не в то же самое высота следующим образом:

есть ли способ, чтобы изменить мой HTML, чтобы заставить их высоту, чтобы быть точно так же.

Answer 1

вы можете использовать собственный стиль CSS для окна, который подталкивает форму поиска вниз или кнопку поиска вверх.

Я не знаю, какую версию брезента вы используете, но вы можете, например. добавить класс с именем «Push-Up-кнопка» вашей кнопку поиска и определить этот класс в CSS с:

.push-up-button { 
    margin-bottom: 10px; 
} 

Ваша кнопка должна не быть:

<input type="submit" value="Search" class="btn btn-primary push-up-button"/> 

Answer 2

Вы можете установить то же свойство специально line-height:

.searchInput, .btn-primary { 
    margin:0; 
    padding:0; 
    line-height:25px; 
} 

Посмотреть это демо http://jsfiddle.net/s6Q6h/4/.

Вам необходимо установить равную высоту в обоих направлениях, поэтому позаботьтесь о границе ввода, вы можете снять 2px из line-height в качестве входных данных для границы.