如何制作< label>和<输入>在HTML表单中出现在同一行上 [英] how to make <label> and <input> appear on the same line in HTML form

问题描述

我正在开展一个项目，我正在为该网站创建一个注册表单。我希望标签及其相应的文本/输入区域出现在同一行上。我尝试了很多方法，很少或无济于事。请你能以正确的方式帮助我解决这个问题，因为我不想通过反复试验得到正确的答案。
这是我的代码

HTML

 < div id =form> 
 
< form action =method =postname =registrationclass =register> 
 
< fieldset> 
 
< label for =学生>名称：< / label> 
< input name =Student/> 
< 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/> 
< / 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-right-right-radius：10px; 
 padding：0px; 
} 
 
 label {
 font-family：格鲁吉亚，Times New Roman，Times，serif; 
 font-size：18px; 
颜色：＃333; 
 height：20px; 
 width：200px; 
 margin-top：10px; 
 margin-left：10px; 
 text-align：right; 
明确：两者; 
} 
 
输入{
 height：20px; 
 width：300px; 
 border：1px solid＃000; 
 margin-top：10px; 
 float：left; 
 
  

解决方案

假设你想浮动元素，你也必须漂浮标签元素。

类似这样的东西可以工作.. 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表单中出现在同一行上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！