Question

如何在屏幕上设置表单元素？

我想改变表单联系的外观。现在它是这样的

我希望得到类似

的内容

这是我的代码

HTML

<section class="contact">
        <h4 class="contact__title">Kontakt</h4>
        <div class="contact__box">
            <article class="contact__main">
                <p>iGroup</p>
                <p>ul. Wyspiańskiego 16</p>
                <p>05-091 Ząbki</p>

                <p><a href="tel:22 423-71-54"><span>Telefon:</span> 22 423-71-54</a></p>
                <p><a href="tel:22 864-09-84"><span>Telefon / fax:</span> 22 864-09-84</a></p>
                <p>
                    <a href="mailto:kontakt@parowe.com.pl"></a><span>E-mail:</span> kontakt@parowe.com.pl</p>

            </article>
        </div>
        <div class="contact__wrap">
            <form>

                <input name="name" placeholder="Imię">

                <input name="email" type="email" placeholder="Adres e-mail">

                <textarea name="message" placeholder="Treść wiadomości"></textarea>

                <input id="submit" class="contact__wrap--submit" name="submit" type="submit" value="Wyślij">

            </form>
        </div>
    </section>

SCSS

.contact {
    width: 100%;
    height: 650px;
    background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%);

    &__title {
        font-family: $font;
        font-weight: 900;
        @include font-size(35px);
        color: rgb(255,255,255);
        padding-top: 20px;
        text-align: center;
    }

    &__main {
        width: 220px;
        height: 200px;
        margin: 0 auto;

        p:nth-child(1) {
            font-family: $font;
            font-weight: 500;
            @include font-size(25px);
            color: rgb(255,255,255);
            text-align: center;
            padding-top: 20px;
            @media only screen and (min-width: $break-medium) {
                text-align: left;
            }
        }

        p:nth-child(2) {
            font-family: $font;
            font-weight: 300;
            @include font-size(25px);
            color: rgb(255,255,255);
            text-align: center;
            @media only screen and (min-width: $break-medium) {
                text-align: left;
            }
        }

        p:nth-child(3) {
            font-family: $font;
            font-weight: 300;
            @include font-size(25px);
            color: rgb(255,255,255);
            text-align: center;
            @media only screen and (min-width: $break-medium) {
                text-align: left;
            }
        }

        p:nth-child(4) {
            font-family: $font;
            font-weight: 500;
            @include font-size(25px);
            color: rgb(255,255,255);
            text-align: center;
            padding-top: 20px;
            @media only screen and (min-width: $break-medium) {
                text-align: left;
            }

            span {
                font-weight: 700;
                @media only screen and (min-width: $break-medium) {
                    text-align: left;
                }
            }
        }

        p:nth-child(5) {
            font-family: $font;
            font-weight: 500;
            @include font-size(25px);
            color: rgb(255,255,255);
            text-align: center;
            padding-top: 5px;
            @media only screen and (min-width: $break-medium) {
                text-align: left;
            }

            span {
                font-weight: 700;
                @media only screen and (min-width: $break-medium) {
                    text-align: left;
                }
            }
        }

        p:nth-child(6) {
            font-family: $font;
            font-weight: 500;
            @include font-size(25px);
            color: rgb(255,255,255);
            text-align: center;
            padding-top: 25px;

            span {
                font-weight: 700;
            }
        }

        a {
            text-decoration: none;
            color: rgb(255,255,255);
        }
    }

    &__box {
        @media only screen and (min-width: $break-medium) {
            width: 300px;
        }
    }

    &__wrap {
        width: 240px;
        height: 320px;
        margin: 0 auto;
        padding-top: 20px;

        ::-webkit-input-placeholder {
            font-family: $font;
            font-weight: 700;
            color: rgb(13,13,13);
            padding-left: 5px;
            @include font-size(30px);
        }

        :-moz-placeholder {
            font-family: $font;
            font-weight: 700;
            color: rgb(13,13,13);
            padding-left: 5px;
            @include font-size(30px);
        }

        ::-moz-placeholder {
            font-family: $font;
            font-weight: 700;
            color: rgb(13,13,13);
            padding-left: 5px;
            @include font-size(30px);
        }

        :-ms-input-placeholder {
            font-family: $font;
            font-weight: 700;
            color: rgb(13,13,13);
            padding-left: 5px;
            @include font-size(30px);
        }

        &--submit {
            width: 240px;
            height: 40px;
            margin: 20px auto 0;
            font-family: $font;
            font-weight: 700;
            color: rgb(13,13,13);
            text-transform: uppercase;
            @include font-size(30px);
            background: rgb(255,255,255);
            text-decoration: none;
            border: 0;
        }

        form {
            display: flex;
            justify-content: center;
            flex-direction: column;
            @media only screen and (min-width: $break-medium) {}

            input {
                border: none;
                margin-top: 5px;
                height: 40px;
                font-family: $font;
                font-weight: 900;
                color: rgb(13,13,13);
                @include font-size(30px);
            }

            textarea {
                resize: none;
                margin-top: 5px;
                height: 190px;
                font-family: $font;
                font-weight: 900;
                color: rgb(13,13,13);
                @include font-size(30px);
                padding-top: 10px;
            }
        }
    }
}

此处demo

Answer 1

只需使用浮动（浮动：左/右）或弹性框。

您还需要稍微更改HTML。所有浮动元素都应该有一些包装。

以下是快速修改：http://codepen.io/anon/pen/gLWpYz

顺便说一下。新混合添加：

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

以同样的方式浮动输入。 1st：为它们做一个包装，为包装器设置清洁剂，第二个：浮动孩子。

我还没有测试过响应...但是设置一些断点以停止在较小的设备上浮动会很容易。

但是SCSS非常垃圾，可以写得更容易和更清洁： - ）

Answer 2

浮动现在是不好的做法，不再需要了。使用flexbox！

在resposnive中形成联系，如何改变外观

2 个答案: