Как заставить текстовое поле поиска и кнопку поиска иметь одинаковую высоту

Question

Как заставить текстовое поле поиска и кнопку поиска иметь одинаковую высоту

0

У меня есть следующий html внутри моего веб-приложения asp.net mvc:

<form class="customSearch"method="GET" action="@Url.Action("Search", "Home")">

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

Результат будет следующим,

где кнопка поиска и текстовое поле имеют разную высоту. Итак, как я могу заставить оба элемента находиться на одном и том же горизонтальном выравнивании?

благодаря

john G 06 дек. 2013, в 16:28

Источник

1

Вы пытались просто добавить небольшое поле внизу кнопки или вверху текстового поля поиска?
Nick 06 дек. 2013, в 15:08
0

Технически, кажется, они имеют одинаковую высоту, поэтому вам следует переформулировать заголовок, указав, что вы ищете вертикальное выравнивание. И jsFiddle также может помочь ... возможно, при его создании вы поймете, что является причиной проблемы!
Laurent S. 06 дек. 2013, в 15:08

Теги:

html

css

html5

1 ответ

Ещё вопросы

Вы пытались просто добавить небольшое поле внизу кнопки или вверху текстового поля поиска?
Технически, кажется, они имеют одинаковую высоту, поэтому вам следует переформулировать заголовок, указав, что вы ищете вертикальное выравнивание. И jsFiddle также может помочь ... возможно, при его создании вы поймете, что является причиной проблемы!

DaniP · Accepted Answer · 2013-12-06T13-27-00.000Z

Сначала сбросьте все значения для обоих input:

input {
   margin:0;
   padding:0;
   border:0;
}

Затем установите равную height, height line-height, vertical-align и box-sizing:

input {
  height:30px;
  line-height:30px;
  vertical-align:middle;
  box-sizing:border-box;
}

После этого вы можете персонализировать каждый из них с боковым padding и цветом для фона и текста.

Демонстрация http://jsfiddle.net/3TeHT/6/