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

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;
}

你会得到它

你应该得到满足

Answer 2

你还没有设置宽度是你的css（虽然你已经在你的问题中提到它但它不在小提琴中！）

请参阅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框架来处理所有这些问题！

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

2 个答案: