Это на самом деле намного сложнее, чем должно быть. Давайте попробуем понять, почему эти элементы не выстраиваются последовательно, тогда мы можем выяснить, что нужно изменить.
Примечание: этот ответ имеет значение Academi c, поскольку объясняет, почему оригинальный код не совсем работает, но для более практичного решения используйте flexbox, как рекомендовано в ответе Куммера Вольфа
Используя инспектор стилей моего браузера, я вижу, что все эти элементы имеют display значение inline-block. Обычно элемент <i> просто встроен, но Font Awesome изменил это с помощью класса fa. Между тем, элементы <input> по умолчанию являются inline-block.
Вертикальное выравнивание встроенных элементов задается с соответствующим атрибутом vertical-align CSS. Опять же, инспектор вычисляемых стилей браузера сообщает нам, что для всех этих элементов свойство установлено в baseline. Это означает, что элементы будут выровнены, так что текст, который они содержат, выровнен, как в примере ниже.
Поскольку ваши элементы - это значки, а не текст, это не совсем то, что вам нужно. Одна вещь, которую вы могли бы сделать, это установить все эти элементы, чтобы они были выровнены по их середине, с vertical-align: middle.
big, small { border: 1px solid blue; display: inline-block; }
.middle>* { vertical-align: middle; }
<p>Here <big>BIG</big> and <small>small</small> are aligned based on the bottom of the letters.</p>
<p class="middle">But here <big>BIG</big> <small>small</small> are aligned based on the middle of their box.
Вам также необходимо убедиться, что все элементы имеют одинаковую высоту, чтобы их верхняя и нижняя границы идеально совпали. Однако есть еще одна проблема. По умолчанию свойство height CSS определяет высоту содержимого элемента, исключая границы и отступы. Таким образом, даже если вы установите высоту элементов <input> и <i> в одно и то же, они не будут совпадать, поскольку у них нет одинаковых границ и отступов. Я предполагаю, что по этой причине вы пытались поиграть с отступами и границами, используя значения 0.5px, но я бы не рекомендовал использовать половину пикселей, если вы хотите, чтобы в браузерах и устройствах было одинаковое поведение.
Если вы хотите высоту свойство для включения границы и отступа, вместо этого вы можете установить атрибут box-sizing элемента в border-box. Таким образом, все, что вам нужно сделать, это установить оба элемента height одинаковыми, а для вас все равно go.
input {
box-sizing: border-box;
height: 22px;
vertical-align: middle;
}
.fa-search {
background: #f7f7f7;
border: 1px solid #a9a9a9;
color: #777777;
}
.fa-check {
background: #eeffee;
border: 1px solid #999999;
}
.fa {
box-sizing: border-box;
cursor: pointer;
height: 22px;
line-height: 1.2;
text-align: center;
vertical-align: middle;
width: 22px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="text" id="search_box" placeholder="Search...">
<i class="fa fa-search" id="search_button"></i>
<i class="fa fa-check" id="other_button"></i>
Чтобы упростить задачу, многие веб-разработчики размещают это в верхней части своих CSS файлов, что гарантирует, что все элементы по умолчанию используют border-box .
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
Я только что заметил, что вы хотели избавиться от пробелов между вашими элементами. Еще одна досадная вещь в элементах inline-block состоит в том, что любые пробелы в коде между ними сворачиваются в один пробел. Если вам не нужен пробел между ними, вам нужно удалить пробел в коде или поместить его в комментарии.
input {
box-sizing: border-box;
height: 22px;
vertical-align: middle;
}
.fa-search {
background: #f7f7f7;
border: 1px solid #a9a9a9;
color: #777777;
}
.fa-check {
background: #eeffee;
border: 1px solid #999999;
}
.fa {
box-sizing: border-box;
cursor: pointer;
height: 22px;
line-height: 1.2;
text-align: center;
vertical-align: middle;
width: 22px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="text" id="search_box" placeholder="Search..."><!--
--><i class="fa fa-search" id="search_button"></i><!--
--><i class="fa fa-check" id="other_button"></i>
Да, это довольно ужасно, но это единственное решение при использовании элементов встроенных блоков ...
Но со всеми Тем не менее, выравнивание элементов формы таким образом особенно утомительно, и вы все равно можете получить некоторые несоответствия между браузерами. Я бы порекомендовал использовать display: flexbox, как рекомендовали другие. Вы можете узнать больше о flexbox здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/