Изменить позицию кнопки отправки в форме - PullRequest
Новая
       6

Изменить позицию кнопки отправки в форме

0 голосов
/ 07 марта 2020

Я разрабатываю форму, используя Html и CSS. Я использовал сетку, чтобы разместить свои текстовые поля. Но проблема, с которой я сталкиваюсь, заключается в положении кнопки отправки. Он расположен рядом с последним текстовым полем, но я хочу, чтобы он был помещен на отдельной строке в конце.

Полный код этой формы: 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Form practice</title>

        <style>
            .container{
                max-width: 1000px;
                margin-left: auto;
                margin-right: auto;
                padding: 1em;
            }

            .wrapper{
                box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
            }

            .wrapper > *{
                padding: 1em;                   
            }

            .form-heading{
                background-color: grey;
            }

            .form-heading h3{
                text-align: center;
            }

            .contact form{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-gap: 10px;
            }

            .contact form label{
                display: block;
            }

            .contact form p{
                margin: 0;
            }

            .contact form .submit-btn{
                grid-column: 25%;
            }

            .contact form button, .conntact form input{
                width: 100%;
                padding: 1em;
                border: 1px solid;
            }

            .contact input[type=text]{
                height: 30px;
                width: 90%;

            }

            .contact form button{
                background-color: grey;
                color: white;
                border: 0;
                text-transform: uppercase;
            }

            .contact form button:hover, .contact form button:focus{
                background-color: silver;
                color: black;                   
                outline: 0;
                /*transition: background-color 1s ease-out; */
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="wrapper">
                <div class="form-heading">
                    <h3>Form</h3>
                </div>
                <div class="contact">
                    <form>
                        <p>
                            <label>First Name</label>
                            <input type="text" name="firstName">
                        </p>

                        <p>
                            <label>Last Name</label>
                            <input type="text" name="lastName">
                        </p>
                        <p>
                            <label>Email Address</label>
                            <input type="text" name="email">
                        </p>
                        <p>
                            <label>Phone Number</label>
                            <input type="text" name="phone">
                        </p>

                        <p class="submit-btn">
                            <button>Submit</button>
                        </p>

                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Пожалуйста, помогите мне в это отношение. Спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 07 марта 2020

Это делает трюк в вашем случае. 

.submit-btn {
    grid-row-start: 3;
    grid-column-start: 3;
    grid-column-end: 3;
}

Но есть несколько предложений:

  • Измените <p> на <div>. <p> - для абзацев текста.
  • Не используйте grid для отображения сетки. Это очень негибко и делает материал трудным для чтения. Вместо этого используйте display: flex. Если вы хотите посмотреть пример использования flex для отображения сетки, вы можете проверить систему координат Bootstrap. ( Basi c grid и реализация для формы . Actual Bootstrap CSS)
  • Нет реальной причины изобретать ваша собственная система сетки вообще. Грид-система Bootstrap является лишь одной из многих уже работающих сеток. :)
0 голосов
/ 07 марта 2020

Вы должны следовать Этот шаблон сетки Документация для управления элементом формы в заданной c позиции.

...