联系表格宽度问题答案

【问题标题】：Contact form width issue联系表格宽度问题
【发布时间】：2017-04-09 19:09:21
【问题描述】：

我的联系表单正在查看它在桌面和平板电脑模式下的表现。但是，当我将浏览器切换到移动设备时，电子邮件输入的长度略短于名称输入和文本框。是什么导致了这个问题？

#formsec{
	margin-left:20px;
	margin-right:20px;
}
#worktogether{
	text-align: center;
	color:white;
	font-size:50px;
	margin-top:60px;
	font-family: 'Philosopher', sans-serif;
}

form {
	max-width:1200px;
	margin: 0 auto 50px;    	
}

input, textarea {
	border: 3px solid #69EAF5;
	width:100%;
	box-sizing:border-box;
	padding:10px;
}

label{
	display:block;
	margin-bottom:20px;
}

span{
	display:block;
	color:white;
	font-size:20px;
}

.contact-info-group label{
	width: 50%;
    box-sizing: border-box;
	float:left;
}

.contact-info-group label:nth-child(1){
	
}

.contact-info-group label:nth-child(2){
	padding-left:15px;
}

input:focus, textarea:focus{
	outline: none;
    border-color:#008a91;
}

textarea{
	height:400px;
}

.button-wrap{
	margin-left:67%;
	width:33%;
}

[type="submit"]{
	background:#097784;
	border-color:#097784;
	color:white;
	font-size: 18px;
	text-transform: uppercase;
}

@media screen and (max-width:480px){

	.contact-info-group label{
	width: 100%;

box-sizing: border-box;
	float:left;	
	
	}
}

<section id="formsec">
 <h3 id="worktogether">Let's Work Together</h3>
 
 <form id="form2" action="FormToEmail.php" methods="POST">
 	<div class="contact-info-group">
 	<label><span>Your Name</span>
 	<input type="text" name="text"></label>
 	
 	<label><span>Your Email</span>
		<input type="email" name="_replyto"></label>
		 </div>
		 
	<label><span>How Can I Help:</span>	 
 	<textarea name="message"></textarea></label>
	

<input class="button-wrap" name="submit_to_programmer" type="submit" value="Submit"/>
</form></section>

【问题讨论】：

标签： html css

【解决方案1】：

桌面有 15 像素的内边距，移动设备需要将其移除。

@media screen and (max-width:480px){
   .contact-info-group label:nth-child(2) {
      padding-left:0px;
   }
}

【讨论】：

【解决方案2】：

您必须覆盖媒体查询中为第二个孩子设置的填充

@media screen and (max-width: 480px) {
  .contact-info-group label:nth-child(2) {
    padding-left: 0;
  }
}

【讨论】：

乐于助人！