Html 表单输入元素大小调整

我想做一个两列的布局表格。但我遇到了一个问题，即表单的输入元素在大小（宽度）和响应性方面并不均等。 我希望它是响应性的，并且它们之间的距离相等

附件代码如下

@导入url（'https://fonts.googleapis.com/css?family=Montserrat');
氢{
字体系列：蒙特塞拉特；
字号：3em；
线高：50px；；
}
形式{
宽度：70%；
利润率：10%自动；
}
输入[type=“text”]{
显示：块；
高度：30px；
宽度：47%；
浮动：左；
}
表单>输入：第n个子项（3）{
左边距：31px；
右边距：0；
}
文本区{
宽度：100%；
框大小：边框框；
利润率：30px0；
}
输入[placeholder=“Name”]，输入[placeholder=“E-mail”]{
填充：10px；
字母间距：5px；
字体系列：蒙特塞拉特；
}
text区域[placeholder=“Message”]{
字母间距：5px；
填充：10px；
字体系列：蒙特塞拉特；
}
/*
输入，文本区{
边框宽度：0 2px 0；
边框颜色：#000；
}*/
表单输入，文本区域：焦点{
大纲：无；
}

联系我们

如果可能，将引导与网格一起使用，如果不容易，解决方案将是添加div，如下所示：

引导网格链接：

联系我们

删除

输入的
浮点
，并添加一个包装器div，如下所示


h2{
字体系列：蒙特塞拉特；
字号：3em；
线高：50px；；
}
形式{
宽度：70%；
利润率：10%自动；
}
#电子邮件{
显示：块；
高度：30px；
宽度：30%；
浮动：左；
保证金：0；
左缘：2%；
}
#名字{
显示：块；
高度：30px；
宽度：30%；
}
表单>输入：第n个子项（3）{
左边距：31px；
右边距：0；
}
文本区{
宽度：100%；
框大小：边框框；
利润率：30px0；
}
输入[placeholder=“Name”]，输入[placeholder=“E-mail”]{
填充：10px；
字母间距：5px；
字体系列：蒙特塞拉特；
}
text区域[placeholder=“Message”]{
字母间距：5px；
填充：10px；
字体系列：蒙特塞拉特；
}
/*
输入，文本区{
边框宽度：0 2px 0；
边框颜色：#000；
}*/
表单输入，文本区域：焦点{
大纲：无；
}

联系我们
试试这个

 <form>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="text" name="" class="form-control">
    </div>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="email" name="" class="form-control">
    </div>
    <div class="col-sm-12 form-group">
        <textarea name="" cols="" rows="10" class="form-control"></textarea>
    </div>
<form>



只需将其添加到表单部分，并添加botstrap所需的文件

1-Jquery

2-Bootsrap.min.css


您的选择器
表单>输入：第n个子项（3）
是一个问题，因为它将h2计算为第一个，将电子邮件输入设为第三个，并为其添加左边距

一旦它消失了，我添加了
margin:30px0
到现有的
输入['text']
选择器，以匹配您应用到文本区域的内容，您可能需要不同的值，但所有内容都是对齐的且间隔均匀：

示例：


h2{
字体系列：蒙特塞拉特；
字号：3em；
线高：50px；；
}
形式{
宽度：70%；
利润率：10%自动；
}
#电子邮件{
显示：块；
高度：30px；
宽度：30%；
浮动：左；
保证金：0；
左缘：2%；
}
#名字{
显示：块；
高度：30px；
宽度：30%；
浮动：左；
}
表单>输入：第n个子项（3）{
左边距：31px；
右边距：0；
}
文本区{
宽度：100%；
框大小：边框框；
利润率：30px0；
}
输入[placeholder=“Name”]，输入[placeholder=“E-mail”]{
填充：10px；
字母间距：5px；
字体系列：蒙特塞拉特；
}
text区域[placeholder=“Message”]{
字母间距：5px；
填充：10px；
字体系列：蒙特塞拉特；
}
/*
输入，文本区{
边框宽度：0 2px 0；
边框颜色：#000；
}*/
表单输入，文本区域：焦点{
大纲：无；
}

联系我们
好吧！我试着找出你的问题，只是试着让它有反应

Max-width and Max-height

max width属性用于设置元素的最大宽度

最大宽度可以用长度值指定，如px、cm等，也可以用包含块的百分比（%）指定，或者设置为无（这是默认值。表示没有最大宽度）

在这种情况下，使用max width将改进浏览器对小窗口的处理。同样的高度

您可以删除
页边距：0自动如果您不想以内容为中心


@导入url（'https://fonts.googleapis.com/css?family=Montserrat');
氢{
空白：自动；
字体系列：蒙特塞拉特；
字号：3em；
线高：50px；
;
}
形式{
宽度：70%；
保证金：0自动；
}
输入[type=“text”]{
最大高度：30px；
最大宽度：47%；
}
文本区{
最大宽度：100%；
框大小：边框框；
利润率：10px0；
}
输入[placeholder=“Name”]，
输入[占位符=“电子邮件”]{
填充：10px；
字母间距：5px；
字体系列：蒙特塞拉特；
边缘底部：10px；
}
text区域[placeholder=“Message”]{
字母间距：5px；
填充：10px；
字体系列：蒙特塞拉特；
}
/*
输入，文本区{
边框宽度：0 2px 0；
边框颜色：#000；
}*/
表格输入，
文本区域：焦点{
大纲：无；
}

联系我们
请提供fiddle查看此处：第17行将
左边距更改为
匹配顶部：31px
@Maulik Bhatt Name和Email元素应在同一行中，保持与responsive相同的宽度。查看此处有什么问题吗？在我的代码
文本区域中，
不在包装器div中。您没有将其写为真。我也没有包括在内包装器分区中的textarea。您刚才在这里编写代码！将
textarea
放入一个div中，该div位于包装器div中。
Max-width and Max-height