如何使用验证为表单中的所有字段赋予相等的宽度？
[英]How to give equal width for all the fields in the form with validations?
问题描述
In the below HTML5 form code, how to give equal width to all the names and input fields so that all the names are aligned in the same column and all the input type fields are aligned in same column with same width?? 
在下面的HTML5表单代码中，如何为所有名称和输入字段赋予相等的宽度，以使所有名称在同一列中对齐，并且所有输入类型字段在同一列中以相同的宽度对齐？
Html code: HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>CSS Contact Form</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body style=" background-color:#E5E4E2">
<h2>Registration Form</h2>
<div style="margin-left:420px; border:1px solid #ccc; width:400px; padding:15px; border-radius:5px;">
<form class="form">
<p class="name">
<label for="name"> First Name *:</label>
<input type="text" name="fname" id="fname" placeholder="John" required/>
</p>
<p class="name">
<label for="name">Last Name *:</label>
<input type="text" name="lname" id="lname" placeholder="Maxwell" required/>
</p>
<p class="web">
<label for="web">Company Name *:</label>
<input type="text" name="web" id="web" placeholder="BDI Systems & Technologies" required/>
</p>
<p class="email">
<label for="email">Email Id *:</label>
<input type="text" name="email" id="email" placeholder="mail@bdisys.com" required/>
</p>
<p class="budget">
<label for="name">Budget :</label>
<input type="text" name="budget" id="budget" placeholder="200000"/>
</p>
<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
</div>
</body>
</html>
Css: CSS：
body {
padding: 100px 100px;
font-size: 13px;
font-style: Verdana, Tahoma, sans-serif;
}
h2 {
margin-bottom: 20px;
color: #474E69;
margin-left:420px;
}
/* ===========================
====== Contact Form =======
=========================== */
input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
/* ===========================
====== Submit Button ======
=========================== */
.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
2 个解决方案
解决方案1
6 已采纳 2014-05-01 06:28:48
解决方案2
1 2014-05-01 06:35:32
You can use floating to adjust the alignment. 您可以使用浮动调整对齐方式。 Like making the labels float left and fields float right. 就像使标签向左浮动而字段向右浮动一样。
I have created a fiddle for you with all changes. 我为您做了所有的改动。 Check it out: http://jsfiddle.net/CZL4w/ 检查一下： http : //jsfiddle.net/CZL4w/
I made the following changes in CSS: 我在CSS中进行了以下更改：
input, textarea {
float:right;
}
input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
float:right;
}
.form label {
margin-left: 10px;
color: #999999;
float:left;
margin-top:10px;
}
And the following changes in your HTML code: HTML代码中的以下更改：
<div style="margin-left:420px; border:1px solid #ccc; width:400px; padding:15px; border-radius:5px; float:left;">
I hope this helps. 我希望这有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.