Question

老实说，我不知道该怎么办，我尝试了浮动和文本对齐方式，但仍然没有任何操作

这是我的代码

代码enter code here https://codepen.io/Gsimelus92/pen/QVXPPz

我想像这样https://codepen.io/freeCodeCamp/full/VPaoNP

Answer 1

尝试从我编写的这段代码中学习。我制作了一个100％宽度的div，在该div内有两个项目。

HTML：

<section>
    <div class="container">
        <div class="item__container">
            <div class="item__1 grid__mar">
                <p>item 1</p>
            </div>
            <div class="item__2 grid__mar">
                <form id="survey-form">
                    <input type="text" name="Your name" placeholder="Enter your name" value="input">
                </form>
            </div>
        </div>
    </div>
</section>

SCSS：

.container {
    margin: 0 auto;
    width: 1100px;
    display: block;
    background-color: bisque;
}

.item__container {
    margin: 0 auto;
    width: 100%;
    letter-spacing: 0;
    font-size: 0;
    display: block;

    .item__1 {
        margin: 0 auto;
        width: 48%;
        display: inline-block;
        background-color: indianred;
        margin: 1% 0 1% 1%;
        vertical-align: top;

        p {
            margin: 0 5px;
            color: #000;
            font-size: 30px;
            text-align: right;
        }
    }

    .item__2 {
        margin: 0 auto;
        width: 49%;
        display: inline-block;
        //background-color: blue;
        margin: 1% 0 1% 1%;

        input {
            border-radius: 5px;
            vertical-align: top;
            width: 100%;
            height: 30px;
        }
    }
}

如何在页面上对齐和居中输入

1 个答案: