Выравнивание ввода html и отправка

Question

У меня возникла смешная проблема, когда мои текстовые поля ввода и кнопки отправки не выстраиваются в линию, и я действительно не могу найти элегантное решение о том, как ее исправить. Как вы можете видеть на изображении ниже, в поле ввода текста (с надписью «Введите ключевые слова» в правом верхнем углу ") является 2px выше, чем„Поиск“отправить:

Вот является HTML:

<div id="search"> 
    <form action="#" method="POST" id="search_form"> 
     <div id="search_inputs"> 
      <input type="text" placeholder="Enter Keywords" name="keywords" /> 
      <input class="button" type="submit" name="search" value="SEARCH" /> 
     </div> 
    </form> 
</div> 

Вот код CSS:

#search_form .button { 
    background: black; 
    color: white; 
    padding: 3px 15px; 
    border: none; 
    font-size: 7pt; 
    height: 18px; 
} 

#search_form input[name="keywords"] { 
    width: 175px; 
} 

#search { 
    margin-top: 7px; 
    float: right; 
} 

Я уверен, что настройка размера шрифта для 7PT Мессинг его, но я не знаю, почему и я не знаю, как справитесь с этим, потому что это размер шрифта моих других кнопок в этой области.

Спасибо за помощь!

Answer 1

, добавив float: left; в начало #search_form input[name="keywords"], выровняйте их вершины правильно, а затем добавьте margin-right, чтобы вы были полезными.

Fiddle

Проблема связана с float: right на кнопку Поиск. Поле ввода имеет естественный display: inline-block, что вызывает небольшое падение. Обычно, когда вы плаваете вправо, исправление относится к перемещению этого элемента вверх в DOM. В этом случае это не сработает. Изменяя ввод на плавающий элемент, вы также вынуждаете его быть display: inline.

Хотя я не уверен, почему вы не можете просто добавить display: inline к элементу.