Assuming you want to float the elements, you would also have to float the label elements too.

像这样的方法可行:

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" id="Student" />
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" id="Matric_no" />
<label for="Email">Email:</label>
<input name="Email" id="Email" />
<label for="Username">Username:</label>
<input name="Username" id="Username" />
<label for="Password">Password:</label>
<input name="Password" id="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>

或者，更常见的方法是将 input/label元素分组包装:

<div class="form-group">
<label for="Student">Name:</label>
<input name="Student" id="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" id="Student" />
</div>
<div class="form-group">
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" id="Matric_no" />
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input name="Email" id="Email" />
</div>
<div class="form-group">
<label for="Username">Username:</label>
<input name="Username" id="Username" />
</div>
<div class="form-group">
<label for="Password">Password:</label>
<input name="Password" id="Password" type="password" />
</div>
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>

Note that the for属性 should correspond to the id of a labelable element, not its name. This will allow users to click the label to give focus to the corresponding form element.

您所缺少的是 float: left; 这里有一个在 HTML 中完成的示例

<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<label for="Student" style="float: left">Name:</label>
<input name="Student" />
<label for="Matric_no" style="float: left">Matric number:</label>
<input name="Matric_no" />
<label for="Email" style="float: left">Email:</label>
<input name="Email" />
<label for="Username" style="float: left">Username:</label>
<input name="Username" />
<label for="Password" style="float: left">Password:</label>
<input name="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>

The more efficient way to do this is to add a class to the labels and set the float: left; to the class in CSS

更新: 2022年中期

这些天我都是这么做的

<form>
    

<field class='text'>
<label for='firstName'>First name</label>
<input type='text' id='firstName'>
</field>
    

<field class='text possible-further-unique-class'>
<label for='lastName'>Last name (family name)</label>
<input type='text' id='lastName'>
</field>


<!-- just showing varying label text length -->
</form>


<!--
regarding the .text class on the custom field element,
usually have a little framework depending on the type of field -
so, checkbox would apply different layout styles
-->

我可以使用 div，但是创建一个自定义元素是可读的，而且实际上只是被屏幕阅读器之类的东西去掉了——语义元素清晰地保留在那里。也许如果我们使用这种模式(或某种模式)足够多，我们甚至可以为这样的输入获得一个正式的分组元素。

在这种情况下，我也可能使用 CSS 网格。Flexbox 为更多的湿软的仪表板和网格时，我知道我想它如何对齐。

这些天我也尽可能地避免顶嘴(谁知道没有顶嘴我也能活下去!)

* {box-sizing:border-box;} /* global + reset */




field.text {
/* it's display: inline by default! */
display: grid; /* naturally 1 column and will stack */
gap: 4px;
}


field.text label {
font-size: 16px;
}


field.text input {
font: inherit;
padding: 5px 10px;
}


form {
display: grid;
gap: 20px;
max-width: 300px; /* or some parent context to constrain it */
}


@media (min-width: 500px) {
form {
max-width: 500px;
}
    

field.text {
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 20px;
}


field.text label {
white-space: nowrap;
}
}

CodePen实况转播

更新: 2016年年中以上移动优先媒体查询和 Flex-box

我最近就是这么做事的。

超文本标示语言

<label class='input-w' for='this-input-name'>
<span class='label'>Your label</span>
<input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>


<label class='input-w' for='this-other-input-name'>
<span class='label'>Your label</span>
<input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>

SCSS

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
}
} // if you don't already reset your box-model, read about it


.input-w {
display: block;
width: 100%; // should be contained by a form or something
margin-bottom: 1rem;
@media (min-width: 500px) {
display: flex;
flex-direction: row;
align-items: center;
}
.label, .input {
display: block;
width: 100%;
border: 1px solid rgba(0,0,0,.1);
@media (min-width: 500px) {
width: auto;
display: flex;
}
}
.label {
font-size: 13px;
@media (min-width: 500px) {
/* margin-right: 1rem; */
min-width: 100px; // maybe to match many?
}
}
.input {
padding: .5rem;
font-size: 16px;
@media (min-width: 500px) {
flex-grow: 1;
max-width: 450px; // arbitrary
}
}
}

jsFiddle

最古老的回答

超文本标示语言

我建议您将它们包装在 div 中，因为您可能最终会在某些上下文中浮动它们。

<div class="input-w">
<label for="your-input">Your label</label>
<input type="text" id="your-input" />
</div>

CSS

然后在这个 div 中，你可以把每个片段设置为 inline-block，这样你就可以使用 vertical-align来使它们居中——或者设置基线等等(你的标签和输入在将来可能会改变尺寸..。

.input-w label, .input-w input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}

JsFiddle

另一种选择是在窗体内放置一个表。(见下文)我知道有些人不赞成使用表格，但我认为它们在响应式表单布局方面表现得很好。

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
<TR>
<TD>Your name</TD>
<TD>
<INPUT TYPE="TEXT" NAME="name" SIZE="20">
</TD>
</TR>
<TR>
<TD>Your E-mail address</TD>
<TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
</TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>

除了像其他人建议的那样使用 float 之外，您还可以依赖于像 鞋带这样的框架，在这种框架中，您可以使用“水平形式”类将标签和输入放在同一行上。

如果你不熟悉 Bootstrap，你需要包括:

• 连接到 引导 CSS (顶部链接显示 < ——最新编译和缩小的 CSS —— >)，在头部，以及添加一些 div:
• Div class = “ form-group”
• Div class = “ col- ...”
• along with Class = “ colsm-2 control-label” in each label, as Bootstrap shows, which I included below.
• 我还重新格式化了你的按钮，所以它是自举兼容。
• 并在表单框中添加了一个图例，因为您使用的是字段集。

它非常直接，您不必像上面列出的那样，为了格式化而使用 float 或大量 CSS。

  <div id="form">
<div class="row">
<form action="" method="post" name="registration" class="register form-horizontal">
<fieldset>
<legend>Address Form</legend>


<div class="form-group">
<label for="Student" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-6">
<input name="Student" class="form-control">
</div>
</div>


<div class="form-group">
<label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
<div class="col-sm-6">
<input name="Matric_no" class="form-control">
</div>
</div>


<div class="form-group">
<label for="Email" class="col-sm-2 control-label">Email: </label>
<div class="col-sm-6">
<input name="Email" class="form-control">
</div>
</div>


<div class="form-group">
<label for="Username" class="col-sm-2 control-label">Username: </label>
<div class="col-sm-6">
<input name="Username" class="form-control">
</div>
</div>


<div class="form-group">
<label for="Password" class="col-sm-2 control-label">Password: </label>
<div class="col-sm-6">
<input name="Password" type="password" class="form-control">
</div>
</div>


<div>
<button class="btn btn-info" name="regbutton" value="Register">Submit</button>
</div>


</fieldset>
</form>
</div>
</div>
</div>

我使用了几种不同的方法，但是我发现唯一能够将标签和相应的文本/输入数据保持在同一行上并且总是完美地包装到父级宽度的方法是使用 display: inline table。

CSS

.container {
display: inline-table;
padding-right: 14px;
margin-top:5px;
margin-bottom:5px;
}
.fieldName {
display: table-cell;
vertical-align: middle;
padding-right: 4px;
}
.data {
display: table-cell;
}

HTML

<div class='container'>
<div class='fieldName'>
<label>Student</label>
</div>
<div class='data'>
<input name="Student" />
</div>
</div>
<div class='container'>
<div class='fieldName'>
<label>Email</label>
</div>
<div class='data'>
<input name="Email" />
</div>
</div>

我发现 "display:flex"风格是一个很好的方式，使这些元素在同一行。不管 div 中的元素是什么类型。特别是如果输入类是表单控制，其他解决方案，如自举，内联块将不能很好地工作。

例如:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="Student">Name:</label>
<input name="Student" />
</div>

关于 display 的更多细节: flex:

伸缩方向: 行，列

内容: flex-end，center，space-between，space-around

对齐项目: 伸展，柔性启动，柔性结束，中心

Wrap the label and the input within a bootstraps div

<div class ="row">
<div class="col-md-4">Name:</div>
<div class="col-md-8"><input type="text"></div>
</div>

对于 Bootstrap 4，它可以用 class="form-group" style="display: flex"来完成

<div class="form-group" style="display: flex">
<label>Topjava comment:</label>
<input class="form-control" type="checkbox"/>
</div>

我正在使用角度6和 Bootstrap 4，发现这样工作:

<div class="form-group row">
<div class="col-md-2">
<label for="currentPassword">Current Password:</label>
</div>
<div class="col-md-6">
<input type="password" id="currentPassword">
</div>
</div>

这个东西工作得很好。把单选按钮或复选框与标签在同一行没有任何 css。 < label > < input type = “ radio”value = “ NEW”name = “ filter”> NEW < label > < input type = “ radio”value = “ WOW”name = “ filter”> WOW