Question

我正在使用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>

在这方面请帮助我。谢谢您的帮助。

Answer 1

您应该遵循This Grid Layout文档来将表单元素管理到特定位置。

Answer 2

这可以解决您的问题。

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

但有一些建议：

用<p>更改<div>。 <p>用于文本段落。
请勿使用grid显示网格。它非常不灵活，使内容难以阅读。请改用display: flex。如果您想查看有关如何使用flex来显示网格的示例，您可能想查看Bootstrap网格系统。（Basic grid和implementation for form。实际Bootstrap CSS）
根本没有真正的理由发明自己的网格系统。 Bootstrap的网格系统只是许多已经运行的网格之一。：）

更改表单中的提交按钮位置

2 个答案: