Что делать, если съезжает поле для ввода текста на странице?

Question

На странице есть блок с полем для ввода текста и кнопкой. Но при открытии страницы в браузере поле для ввода текста съезжает вниз и я не могу никак переместить её обратно. Причём, происходит это только когда на странице есть кнопка. Что делать?

HTML код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <h1 class="large-text">Hello World!</h1>
        <div class="search-text-field-block"> <input type="text" class="search-text-field"> <button class="search-button"></button> </div>
    </div>
</body>
</html>
<script src="index.js"></script>

CSS код:

* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url("img1.png");
    background-size: 100%;
}
.main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}
.large-text {
    font-size: 10vh;
    margin: 25vh 0 10%;
    grid-column: 2 / 3;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.search-text-field-block {
    grid-column: 2 / 3;
    background-color: whitesmoke;
    border: 0;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #0006;
    min-height: 5vh;
    white-space: nowrap;
}
.search-text-field {
    outline: none;
    border: 0;
    width: 90%;
    text-align: center;
    height: 100%;
    background-color: #000f;
}
.search-button {
    border: 0;
    border-radius: 5px;
    width: 10%;
    height: 100%;
    background-color: white;
    transition-duration: 500ms;
    -webkit-transition-duration: 500ms;
    background-image: url("search-image-1.png");
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}
.search-button:hover {
    background-color: gainsboro;
}

БЛОГ НА HUSL

Что делать, если съезжает поле для ввода текста на странице?

Ответы (0 шт):