如何在css中使表单响应?

时间:2018-04-30 17:24:00

标签: html css forms responsive-design

我有一个截图如下所示,我必须在HTML / CSS中复制。 以下屏幕截图在桌面和移动视图中看起来应完全相同

enter image description here

此时此刻,我可以在fiddle中获得此功能,在桌面视图中看起来不错,但我可以在移动视图中看到右边的白色间距



我想我需要在下面的CSS代码中进行一些更改,但不确定这是否是需要更改的正确类。

.login-page .form .login-form .add-winner {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #1173B7;
    background-color: white;
    color: #1173B7;
    font-size: 14px;
    width: 25%;
    font-weight: bold;
    font-family: "Open Sans";
    outline: 0;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

.login-page .form .login-form .save {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #C4C4C4;
    border: 1px;
    color: white;
    font-size: 14px;
    width: 35%;
    font-weight: bold;
    font-family: "Open Sans";
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

问题陈述:

我想知道在小提琴中我应该在CSS 中进行哪些更改,以便上述设计在移动和桌面视图中看起来完全相同。

此时,我在移动视图中的右侧看到了空格

2 个答案:

答案 0 :(得分:2)

您的form元素的静态宽度设置为500px。

将其更改为:

form {
    max-width: 500px;
    width: 100%;
}

添加此项也可能会有所帮助,因此填充包含在宽度计算中:

form {
    box-sizing: border-box;
}

答案 1 :(得分:2)

只需将第52行的CSS更改为:

.form {
background: #FFFFFF;
width: 100%;
height: 500px;
max-width: 500px;
margin: 0 auto 100px;
box-sizing: border-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 
0.24);
}

我为表单设置了最大宽度,以便在表单宽度超过500px宽度时将其宽度设置为500px。否则,它将是浏览器区域宽度的100%。