html - 如何使 HTML 文本框根据页面大小调整大小？

Question

我一直卡在缩小页面时如何让两个文本框改变大小？因此，当有人将页面向侧面拖动时，两个框也会开始变小(如果这有意义的话)。你能帮帮我吗？

到目前为止，这是我的代码:http://jsfiddle.net/xiiJaMiiE/3nQue/

.homeform {
position:relative;
width:20%;
}

提前致谢!

Answer 1

如果你想调整它的大小，你必须选择输入元素

.homeform input[type="email"], .homeform input[type="password"] {
    position:relative;
    width:50%;
}

如果您希望提交按钮也被调整大小，您可以简单地将上面的内容缩短为下一个

.homeform input {
    position:relative;
    width:50%;
}

这将调整具有 class="homeform" 属性的元素中所有输入元素的大小。

虽然我不是这个实现的粉丝。假设有人在手机上访问您的网站，文本框会太小。 (提示:min-width 属性或响应式设计)