我是 CSS 新手，并且有一个简单的登录表单，我正在尝试正确对齐。基本上是两列，其中一列包含标签和登录按钮，另一列包含文本框。我如何在 CSS 中做到这一点？
HTML 代码是：
<body>
<form action="" method="post">
<label> Username </label>
<input type="text"/>
<label> Password </label>
<input type="password"/>
<input type="submit" value="submit"/>
</form>
</body>
这是一种有效的方法：
form {
width: 80%;
margin: 0 auto;
}
label,
input {
/* In order to define widths */
display: inline-block;
}
label {
width: 30%;
/* Positions the label text beside the input */
text-align: right;
}
label+input {
width: 30%;
/* Large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* Only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input+input {
float: right;
}<form action="#" method="post">
<!-- note that I've added a 'for' attribute to
both of the <label> elements, which is
equal to the 'id' attribute of the relevant
<input> element; this means that clicking
the <label> will focus the <input>: -->
<label for="username">Username</label>
<input id="username" type="text" />
<label for="password">Password</label>
<input id="password" type="password" />
<input type="submit" value="submit" />
</form>当然，调整尺寸和边距以适合您的用例和审美。
当然，目前还有其他方法可以实现这一点，例如 CSS Grid：
*,
::before,
::after {
/* selecting all elements on the page, along with the ::before
and ::after pseudo-elements; resetting their margin and
padding to zero and forcing all elements to calculate their
box-sizing the same way, 'border-box' includes the border-widths,
and padding, in the stated width: */
box-sizing: border-box;
margin: 0;
padding: 0;
}
form {
/* Using CSS Grid to lay out the elements in two-dimensions: */
display: grid;
/* specifying a 0.5em gutter/gap between adjacent elements: */
gap: 0.5em;
/* declaring a number of named grid areas in order to lay out
the child elements; the areas identified with a period (.)
are 'empty' areas, whereas the areas named by strings are
used, later, to place elements according to those names: */
grid-template-areas:
"usernameLabel . usernameInput"
"passwordLabel . passwordInput"
". . submit";
/* declaring the size of each of the three columns; 1fr is
one fractional unit of the available space, and is the
size of the first and last of the columns. The central
column is declared as being 0.5em in width: */
grid-template-columns: 1fr 0.5em 1fr;
margin: 1em auto;
width: 80%;
}
label {
/* placing all <label> elements in the grid column 1 (the first): */
grid-column: 1;
/* aligning text-content to the right in order to position the label
text near to the relevant <input>: */
text-align: right;
}
label::after {
content: ':';
}
input {
grid-column: 3;
}
button {
/* positioning the <button> element in the grid-area identified
by the name of 'submit': */
grid-area: submit;
}<form action="" method="post">
<label for="username">Username</label>
<input id="username" type="text" />
<label for="password">Password</label>
<input id="password" type="password" />
<input type="submit" value="submit" />
</form>参考：
+) 组合子。box-sizing.display.float.gap.grid-area.grid-template-areas.grid-template-columns.grid-template-rows.margin.width.参考书目：
对于您的要求，我只是将它们放在一张桌子上。
<form action="" method="post">
<table>
<tr>
<td><label> Username </label></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><label> Password </label></td>
<td> <input type="password"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit"/></td>
</tr>
</table>
</form>
这是它的样子 http://jsfiddle.net/wCSAn/
您还可以使用 CSS 中的 position 属性来对齐标签并根据需要以某种指定的方式输入。这样，它们就按照父元素进行排列。
form {
position: relative;
width: 70%;
text-align: right;
}
label {
width: 30%;
position: absolute;
left: 10%;
text-align: right;
margin-right: 30px;
}
input[type=submit] {
position: absolute;
left: 25%;
background-color: #9AE5F8;
}
这是其jsfiddle的链接。