如何自动调整表单中输入字段的大小？

Question

我正在尝试使我的注册表单响应移动设备，但我在调整输入字段的大小时遇到了一点问题，

我做了一个jsfiddle来说明情况： https://jsfiddle.net/ntvrhLpe/

我希望如果宽度小于 540px，输入字段会自动调整为全宽，两侧边距为 10px。

我已经尝试了一些方法，但没有任何效果：

input[type=text], input[type=password], input[type=email]{
margin-left:10px;
margin-right:10px;
width:100%;
}

有人可以帮助我吗？

Answer 1

你没有设置宽度是你的css（它不在fiddle中，虽然你在你的问题中提到了它！）

请看https://jsfiddle.net/rwbLmex2/

@media (max-width: 540px) {
label {
    text-align:left;
    width:180px;
    float:left;
    margin-top:10px;
    margin-left:20px;
} 
input[type=text], input[type=password], input[type=email]{
    margin-left:10px;
    margin-right:10px;
    width : 100%
}
}

顺便说一下，我建议使用像 bootstrap 这样的 CSS 框架，它可以为您处理所有这些问题！

Answer 2

您的初始 CSS 输入

input[type=text], input[type=password], input[type=email] {
    font-size: 20px;
    margin-bottom:10px;
    padding: 8px 6px;
    height: 38px;
    width:250px;
    box-sizing: border-box;
}

然后在你的媒体查询中：

input[type=text], input[type=password], input[type=email] {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

fieldset {
    padding: 10px;
}

你会得到的

你应该会满意的

如何自动调整表单中输入字段的大小？

How do I automatically resize input fields in a form?

html

css

forms

input-field