html - 用于布局表单的 CSS 网格

Question

我试着弄清楚是否有任何简单的方法可以通过 usgin css 网格或 css flexbox 系统或其他任何方式来布局此表单

这是我自己的代码，但看起来太复杂了

<form class="contactus__content1__box__form">
                        <div class="contactus__content1__box__form__line1">
                        <label class="contactus__content1__box__form__line1__label" style={{ display : 'block' }} >Name:  </label>
                        <input class="contactus__content1__box__form__line1__input" type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line2">
                        <label class="contactus__content1__box__form__line2__label"style={{}} >Email:  </label>
                        <input class="contactus__content1__box__form__line2__input"  type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line2">
                        <label class="contactus__content1__box__form__line2__label"style={{}} >Tel No.:  </label>
                        <input class="contactus__content1__box__form__line2__input"  type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line3">
                            <label class="contactus__content1__box__form__line3__label" style={{ display : 'block' }} >Subject:  </label>
                            <input class="contactus__content1__box__form__line3__input"   type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line4">
                            <label class="contactus__content1__box__form__line4__label" style={{ display : 'block' }} >Message:  </label>
                            <input class="contactus__content1__box__form__line4__input" style={{}} type="text" name="name" />
                        </div>
                    </form>

这是应用 cssgrid 的 css

&__form{
                display:grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows:  min-content min-content min-content min-content min-content;
                align-items: center;
                &__line1{
                    grid-column: 1/3;
                    margin-bottom: 15px;
                    &__label{           
                    }
                    &__input{
                        width: 95%;
                    }
                }
                &__line2{
                    margin-bottom: 15px;
                    &__label{

                    }
                    &__input{
                        width: 90%;
                    }
                }
                &__line3{
                    grid-column: 1/3;
                    grid-row: 3/4;
                    margin-bottom: 15px;
                    &__label{
                    }
                    &__input{
                        width: 95%;
                    }
                }
                &__line4{
                    grid-column: 1/  3;
                    grid-row:4/5;
                    margin-bottom: 15px;

                    &__label{
                    }
                    &__input{
                        // margin-left: 300px;
                        width: 95%;
                        line-height: 80px;
                    }
                }
            }

如您所见，我需要为每一行(输入 + 标签)声明 grid-column 和 grid-row 所以如果有更直接的方法请告诉我这个简单的方法需要太多的努力

Answer 1

请在下面查看我的解决方案。我使用 css-grid 来自定义您的表单，并且使其适合移动设备。

我还简化了你的类名——你可以按照你想要的任何方式重命名它们。

JSbin链接:https://jsbin.com/sedamij/edit?html,css,output

HTML

<main class="contact-us-page">
  <div class="contact-us-wrapper">
    <h1 class="contact-us-title">SEND US AN EMAIL</h1>
    <h2 class="contact-us-subtitle">GET IN TOUCH WITH US</h2>
    <form action="index.html" class="contact-us-form">
      <label for="name">Name:*</label>
      <input type="text" id="name" required></input>
      <label for="contact-email">Email:*</label>
      <input type="email" id="contact-email" required></input>
      <label for="contact-tel">Tel:*</label>
      <input type="tel" id="contact-tel" required></input>
      <label for="subject">Subject:*</label>
      <input type="text" id="subject" required></input>
      <label for="message">Message:*</label>
      <textarea id="message" rows="15" id="message"></textarea>

      <button type="submit" class="button">SEND</button>
    </form>
  </div>
</main>

CSS

main {
    padding-top: 1rem;
}

.contact-us-wrapper {
    max-width: 51rem;
    margin: 0 auto;
}

.contact-us-title {
    font-size: 1.5rem;
    color: #E46E00;
    margin-bottom: 0.2rem;

}

.contact-us-subtitle {
    color: gray;
    font-size: 1.3rem;
    margin-top: 0;
}

.contact-us-form {
    padding: 1rem;
    display: grid;
    grid-auto-rows: 2rem;
    grid-row-gap: 0.5rem;

}

.contact-us-form label {
    font-weight: bold;
}

.contact-us-form label,
.contact-us-form input {
    display: block;
    width: 100%;
}

.contact-us-form input:focus {
    outline: none;
    background: #ece7e7;
    border-color: #2ddf5c;
}

.contact-us-form button[type="submit"] {
    display: block;
    background-color: #E46E00;
    color: white;

}

.contact-us-form input.invalid,
.contact-us-form select.invalid,
.contact-us-form.needs-validation :invalid {
    border: 1px solid red !important;
    background-color: #ff8e8e
}

label[for="name"] {
    grid-row: 1 / 2;
}

#name {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

label[for="contact-email"] {
    grid-row: 3 / 4;
}

#contact-email {
    grid-row: 4 / 5;
}

label[for="contact-tel"] {
    grid-row: 5 / 6;
}

#contact-tel {
    grid-row: 6 / 7;
}

label[for="subject"] {
    grid-row: 7 / 8;
}

#subject {
    grid-row: 8 / 9;
}

label[for="message"] {
    grid-row: 9 / 10;
}

#message {
    grid-row: 10/ 15;
}

form button[type="submit"] {
    grid-row: 15 / 16;
}



@media (min-width: 40rem) {
    .contact-us-form {
        margin: auto;
        width: 50rem;
        grid-template-columns: 22rem 22rem;
        grid-column-gap: 1rem;
    }

    label[for="name"] {
        grid-row: 1 / 2;
    }

    #name {
        grid-row: 2 / 3;
        grid-column: 1 / 3
    }

    label[for="contact-email"] {
        grid-row: 3 / 4;
        grid-column: 1 / 2
    }

    #contact-email {
        grid-row: 4 / 5;
        grid-column: 1 / 2;
    }

    label[for="contact-tel"] {
        grid-row: 3 / 4;
        grid-column: 2 / 3;
    }

    #contact-tel {
        grid-row: 4 / 5;
        grid-column: 2 / 3;
    }

    label[for="subject"] {
        grid-row: 5 / 6;
    }

    #subject {
        grid-row: 6 / 7;
        grid-column: 1 / 3;
    }

    label[for="message"] {
        grid-row: 7 / 8;
    }

    #message {
        grid-row: 8 / 13;
        grid-column: 1 / 3;
    }

    form button[type="submit"] {
        grid-row: 14 / 15;
    }

}

截图: