html - 如何在不使用 Bootstrap 的情况下使 HTML 表单输入字段响应

问题描述

我有一个非常基本的 HTML 表单，其中有两个并排的文本输入字段（名称和公司）以及一个提交和返回按钮。

我想让我的输入字段的宽度随着浏览器宽度的减小而缩小。

请参阅第 1 张附加图片了解它当前在全宽时的外观，以及第 2 张附加图片了解我希望它在浏览器窗口缩小时的外观。

我尝试将整个表单包装在一个 Div 中并将 Div 设置为 width: 100%; 但它没有效果..我也尝试了其他各种调整，但感觉就像我在风中飘扬，因为我真的不知道我应该改变什么..有什么想法吗？

<form action="" method="post">
    <div class="row" align="center">

        <div class="column left">
            <label for="name">Name<span class="err"></span></label><br>
            <input id="name" type="text" name="Name"><br>
        </div>
        <div class="column right">
            <label for="company">Company<span class="err"></span></label><br>
            <input id="company" type="text" name="Company"><br>
        </div>

    </div>

    <div align="center">
        <a href="#"><button class="back-btn" type="button">Back</button></a>
        <input class="sign-in-btn" type="submit" value="Sign In">
    </div>

</form>



    * {
        box-sizing: border-box;
    }

    .row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 45px;
        text-align: left;
    }


    input[type=text], select {
        width: 550px;
        height: 100px;
        margin: 10px 15px 50px;
        border: 3px solid #d9569f;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        text-align: center;
        text-align-last: center;
    }


    label {
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #555;
        margin-left: 30px;
    }


    input.sign-in-btn {
        width: 250px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #fff;
        background: #d9569f;
        margin-left: 30px;
    }


    .sign-in-btn:active {
        color: #d9569f;
        background-color: #fff;
        border: 3px solid #d9569f;
    }


    .back-btn {
        width: 250px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #fff;
        background: #d9569f;
        margin-right: 30px;
    }


    .back-btn:active {
        color: #d9569f;
        background-color: #fff;
        border: 3px solid #d9569f;
    }


    a {
        color: #fff;
        text-decoration: none;
    }

标签： htmlcss

html - 如何在不使用 Bootstrap 的情况下使 HTML 表单输入字段响应

问题描述

解决方案

推荐阅读