Question

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

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

请参阅第一个附加图像，以了解当前在全宽时的外观，第二个附加图像，以查看当浏览器窗口缩小时我希望它的外观。

我尝试将整个Form包裹在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;
    }

Answer 1

您可以使用媒体查询器进行响应式查看

paste("Coherence", dates[seq(1, length(dates), 2)], dates[seq(2, length(dates), 2)], sep="_")
[1] "Coherence_20180412_20180424" "Coherence_20180506_20180518" "Coherence_20180530_20180611"
[4] "Coherence_20180623_20180705" "Coherence_20180717_20180729"

Answer 2

您可以尝试这样的事情：

@media only screen 
and (max-device-width: 800px)
    { 
        input[type=text], select {
            width: 400px;
            ...
    }
}

max-device-width括号内的部分仅在指定的设备屏幕宽度值下有效。

Answer 3

媒体查询是减少浏览器宽度时缩小内容规模的最佳选择。您可以在 css

中包含这些媒体查询

/ *额外的小型设备（电话，600像素及以下）* /

@media only screen and (max-width: 600px) {}

/ *小型设备（纵向平板电脑和大型手机，600像素及以上）* /

@media only screen and (min-width: 600px) {}

/ *中型设备（横向平板电脑，768像素及以上）* /

@media only screen and (min-width: 768px) {}

/ *大型设备（笔记本电脑/台式机，992px及以上）* /

@media only screen and (min-width: 992px) {}

/ *特大设备（大型笔记本电脑和台式机，1200px及以上）* /

@media only screen and (min-width: 1200px) {}

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

3 个答案: