在css

Question

我有一个表单截图（在pc视图中），如下所示，我必须在HTML / CSS中复制。

我为上面的屏幕截图创建了fiddle。

问题陈述：

（1）我想知道我需要在小提琴中做些什么更改，以便我能够扩展上面屏幕截图中箭头标记的表单宽度。

我尝试使用边距和表单类的填充，如下所示，但它没有用。

每当我增加表单的填充时，表单内的输入字段似乎遍布整个地方。

.form {
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    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)
}

（2）此外，我应该在CSS中进行哪些更改，以便我可以将表单（标记为橙色标记，格式为）一点点向底部。

Answer 1

为文本输入字段指定宽度为100％，然后您可以使用填充来控制表单元素的大小。

.form {
background: #FFFFFF;
max-width: 360px;
margin: 150px auto 100px auto;
padding: 0px;
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)
}

input[type="text"] {
    width: 100%;
}

请注意，我已经稍微修改了.form样式。