Кривит элементы

@djedaimo · Регистрация: 07.04.2016

Author24 — интернет-сервис помощи студентам

Все видно на скрине

HTML5

<form action="">
    <input type="text" placeholder="Search.." name="search">
    <button type = "submit"><i class="fas fa-search"></i></button>
    </form>

CSS

button,input{
    font-size: .9375em;
    border: 1px solid black; 
}
form{
    width: 180px;height: 36px;
}
button{
    border-left: none;
    background-color: white;
    margin-left: -4px;
    width: 20%;height: 100%;
}
input[type = "text"]{
    border-right: none;
    padding-left: 10px;
    width: 80%;height: 100%;
}

@Fart83 · 23.06.2018, 00:09

HTML5

button {
    border-left: none;
    background-color: white;
    margin-left: -4px;
    width: 20%;
    height: 100%;
    position: relative;
    top: 11px;
}

так попробуйте и еще подогнать -> top: 11px;

@AlexZaw · 23.06.2018, 00:22

Для input-а задайте box-sizing: border-box; vertical-align: top;
box-sizing для того что бы элементы не перепрыгивали на другую строку как в приведенном коде, ну а vertical-align для выравнивания(его кстати вместо инпута можно и для кнопки прописать)

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	23.06.2018, 00:22	3
	Для input-а задайте `box-sizing: border-box; vertical-align: top;` box-sizing для того что бы элементы не перепрыгивали на другую строку как в приведенном коде, ну а vertical-align для выравнивания(его кстати вместо инпута можно и для кнопки прописать) 1