HTML 格式，使我的表单看起来不错

<分区>

我正在尝试制作一个看起来不错的 HTML 表单。但是我的格式有点不对。我也在尝试使表单响应。我需要在一行中输入名字和姓氏。地址就在下。第三个是城市和州，第四个是电子邮件和电话号码，最后一个是提交按钮和隐私链接。我试过在一个表中使用另一个表，但效果不是很好。

我的问题是如何将这些字段固定在一起。现在地址栏比其他的短。所有的线都是不同的长度，我想让它们的长度相同并让它们正确排列。 Here is my sample

:before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p, li {
  letter-spacing:-0.05vw;
}
h1 {
 letter-spacing:-0.3vw;
}

#p3 {
  background-color:white;
}

table {
  border:0;
  padding:0;
  border-collapse:collapse;
 }

div {
 
  float:left;
}

.btn {
 font-family:Oswald-RegularItalic;
  font-size:1.2vw;
  width:25%;
  display:block;
	float:left;
	margin-left:2%;
	background-color:#00A151;
	height:2.5vw;
	border: 0 none;
	color:white;
	margin-bottom:10%;
	
} 

#p3 h3 {
  color:#00A151;
  font-size:2vw;
  font-family:Oswald-RegularItalic;
  margin:10% 0 5% 0;
  padding:0;
}

#p3 div {
 margin:0;
}
#fname, #lname, #address, #city, #state , #zip, #phone{
  height:35px;
	line-height:35px;
	font-size:20px;
	border: 1px solid #1B75B7;
}

#fname, #lname, #address, #city, #state {
  margin-bottom:3px;
}
#fname {
 margin-right:4px;}

#fname, #lname{
	float:left;
	display:inline-block;
	white-space:nowrap;
	width:48%;
}

#address {
  width:97%;
}

#city {
  width:86%;
}
#state {
  width:10%;
}
#zip, #phone {
  margin-bottom:20px;
}
#zip {
  width:40%;
}
#phone {
  width:56%;
}

#p3 input::-webkit-input-placeholder { /* WebKit browsers */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 input::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 input:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 #state::-webkit-input-placeholder { /* WebKit browsers */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:0;
}
#p3  #state:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:0;
}
#p3  #state::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:0;
}
#p3  #state:-ms-input-placeholder { /* Internet Explorer 10+ */
   font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:0;
}
#p3 .submitBtn {
 margin:0 10% 10% 0;
}

p3 p {
  font-size:14px;
}
#p3 .privacy {
  font-size:1vw;
  font-family:Oswald-RegularItalic;
  cursor:pointer;
}

<table width="100%" id="p3" cellpadding="0" cellspacing="0">
    <tr>
	  <td width="100%" colspan="3" align="center"><h3>Where would you like us to send your brochure and DVD?</h3>
	  </td>
	</tr>
	<tr>
	  <td width="25%"></td>
	  <td width="50%">
	    <form class="contactForm" method="post" action="send.php">
          <div>
            <input name="fname" type="text"  placeholder="First Name"id="fname" required>
			<input name="lname" type="text"  placeholder="Last Name"id="lname" required><br>
			<input name="address" type="text"  placeholder="Address"id="address" required>
			<input name="city" type="text"  placeholder="City" id="city" required>
			<input name="state" type="text"  placeholder="State" id="state" maxlength="2" onkeyup="this.value = this.value.replace(/[^A-z]/, '')"  required>
			<input name="zip" type="text"  placeholder="Zip Code" id="zip" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" maxlength="2" required>
			<input name="phone" type="tel"  placeholder="Phone" id="phone" required>
			<input class="btn submitBtn" id="send" value="Send It!" type="submit">
			<p class="privacy">Privacy Policy</p>
          </div>
		</form>
	  </td>
	  <td width="25%"></td>
	</tr>
  </form>
  </table>

最佳答案

你不应该使用表格来格式化，这条规则是铁定的，表格仅用于表格数据。

此外，这是无响应的，它在移动设备上看起来很糟糕(调整大小并自行查看)。

我建议您使用框架让您的生活更轻松。 Bourbon / neat如果你熟悉 sass 或者 pure css如果你不是。

提示:不要犹豫在新行上输入内容，向下滚动没有您想象的那么麻烦，充分利用您的水平屏幕空间。

关于HTML 格式，使我的表单看起来不错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30813645/