![表单 表单](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了如何制作< label>和<输入>在HTML表单中出现在同一行上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在开展一个项目,我正在为该网站创建一个注册表单。我希望标签及其相应的文本/输入区域出现在同一行上。我尝试了很多方法,很少或无济于事。请你能以正确的方式帮助我解决这个问题,因为我不想通过反复试验得到正确的答案。
这是我的代码
HTML p>
label {
/ *其他样式.. * /
text-align:right;
明确:两者;
float:left;
margin-right:15px;
}
#form {background-颜色:#FFF; height:600px;宽度:600px; margin-right:auto; margin-left:auto; margin-top:0px; border-left-left-radius:10px; border-right-right-radius:10px; padding:0px; text-align:center;} label {font-family:Georgia,Times New Roman,Times,serif; font-size:18px;颜色:#333; height:20px;宽度:200px; margin-top:10px; margin-left:10px; text-align:right;明确:两者;向左飘浮; margin-right:15px;} input {height:20px;宽度:300px; border:1px solid#000; margin-top:10px; float:left;} input [type = button] {float:none;}
< div id =form> < form action =method =postname =registrationclass =register> <字段集> < label for =Student>名称:< / label> <输入名称=学生/> < label for =Matric_no>基数:< / label> < input name =Matric_no/> < label for =电子邮件>电子邮件:< / label> < input name =Email/> < label for =用户名>用户名:< / label> < input name =Username/> < label for =密码>密码:< / label> < input name =Passwordtype =password/> < input name =regbuttontype =buttonclass =buttonvalue =Register/> < /字段集> < / form>< / div>
更常见的做法是将输入 / 标签元素分组包装:
< div class =form-group>
< label for =学生>名称:< / label>
< input name =Student/>
< / div>
#form {background-color:#FFF; height:600px;宽度:600px; margin-right:auto; margin-left:auto; margin-top:0px; border-left-left-radius:10px; border-right-right-radius:10px; padding:0px; text-align:center;} label {font-family:Georgia,Times New Roman,Times,serif; font-size:18px;颜色:#333; height:20px;宽度:200px; margin-top:10px; margin-left:10px; text-align:right;保证金权:15px的; float:left;} input {height:20px;宽度:300px; border:1px solid#000; margin-top:10px;} < div id = 形式 > < form action =method =postname =registrationclass =register> <字段集> < div class =form-group> < label for =Student>名称:< / label> <输入名称=学生/> < / DIV> < div class =form-group> < label for =Matric_no>基数:< / label> < input name =Matric_no/> < / DIV> < div class =form-group> < label for =电子邮件>电子邮件:< / label> < input name =Email/> < / DIV> < div class =form-group> < label for =用户名>用户名:< / label> < input name =Username/> < / DIV> < div class =form-group> < label for =密码>密码:< / label> < input name =Passwordtype =password/> < / DIV> < input name =regbuttontype =buttonclass =buttonvalue =Register/> < /字段集> < / form>< / div>
i am working on a project and i am trying to create a registration form for the website. i want both the label and its corresponding text/input area to appear on the same line. i have tried a lot of methods to little or no avail. Please can you help me out with the right way to go about this as i do not want to get it right by trial and error thanks.here's my code
HTML
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<label for="Student"> Name: </label>
<input name="Student" />
<label for="Matric_no"> Matric number: </label>
<input name="Matric_no" />
<label for="Email"> Email: </label>
<input name="Email" />
<label for="Username"> Username: </label>
<input name="Username" />
<label for="Password"> Password: </label>
<input name="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
CSS
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
clear: both;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
float: left;
}
解决方案
Assuming you want to float the elements, you would also have to float the label elements too.
Something like this would work..
label {
/* Other styling.. */
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
float: left;
}
input[type=button] {
float:none;
}
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<label for="Student">Name:</label>
<input name="Student" />
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" />
<label for="Email">Email:</label>
<input name="Email" />
<label for="Username">Username:</label>
<input name="Username" />
<label for="Password">Password:</label>
<input name="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
Alternatively, a more common approach would be to wrap the input/label elements in groups:
<div class="form-group">
<label for="Student">Name:</label>
<input name="Student" />
</div>
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
margin-right:15px;
float:left;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
}
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<div class="form-group">
<label for="Student">Name:</label>
<input name="Student" />
</div>
<div class="form-group">
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" />
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input name="Email" />
</div>
<div class="form-group">
<label for="Username">Username:</label>
<input name="Username" />
</div>
<div class="form-group">
<label for="Password">Password:</label>
<input name="Password" type="password" />
</div>
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
这篇关于如何制作< label>和<输入>在HTML表单中出现在同一行上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!