如何在 HTML 中对齐输入表单

小开

对于最基本的东西，你可以试着把它们排列在桌子上。然而，表格的使用对于布局是不利的，因为表格是用来存储内容的。

您可以使用 CSS 浮动技术。

CSS 代码

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

超文本标示语言

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

我写的一篇详细的文章可以找到对 IE7浮动问题的回答: IE7漂浮正确的问题

小开

如果您是 HTML 新手，一个简单的解决方案就是使用一个表来排列所有内容。

<form>
<table>
<tr>
<td align="right">First Name:</td>
<td align="left"><input type="text" name="first" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td align="left"><input type="text" name="last" /></td>
</tr>
<tr>
<td align="right">Email:</td>
<td align="left"><input type="text" name="email" /></td>
</tr>
</table>
</form>

小开

最佳答案

另一个例子，它使用 CSS，我只是将表单放在一个带有容器类的 div 中。并指定其中包含的输入元素为容器宽度的100% ，并且两边都没有任何元素。

.container {
width: 500px;
clear: both;
}


.container input {
width: 100%;
clear: both;
}

<html>


<head>
<title>Example form</title>
</head>


<body>
<div class="container">
<form>
<label>First Name</label>
<input type="text" name="first"><br />
<label>Last Name</label>
<input type="text" name="last"><br />
<label>Email</label>
<input type="text" name="email"><br />
</form>
</div>
</body>


</html>

小开

传统的方法是使用表。

例如:

<table>
<tbody>
<tr>
<td>
First Name:
</td>
<td>
<input type="text" name="first">
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input type="text" name="last">
</td>
</tr>
</tbody>
</table>

然而，许多人会争辩说，表格是限制性的，而且更喜欢 CSS。使用 CSS 的好处是您可以使用各种元素。从 div、有序和无序列表中，您可以完成相同的布局。

最后，你会想用你最喜欢的东西。

提示: 表很容易开始。

小开

我非常喜欢使用定义列表。

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

它们很容易使用 CSS 设计样式，并且避免了使用表格进行布局的耻辱。

小开

为此，我倾向于保持正确的 HTML 语义，并尽可能使用简单的 CSS。

像这样的东西可以起作用:

label{
display: block;
float: left;
width : 120px;
}

One drawback however : you might have to pick the right label width for each form, and this is not easy if your labels can be dynamic (I18N labels for instance).

小开

你应该用桌子。作为 逻辑结构的一个问题，数据是表格式的: 这就是为什么你想要它对齐，因为你想要显示标签不仅仅与它们的输入框相关，而且在一个二维结构中彼此相关。

[考虑一下，如果要显示的是字符串或数值而不是输入框，您会怎么做。]

小开

使用 CSS

.containerdiv label {
float:left;
width:25%;
text-align:right;
margin-right:5px; /* optional */
}
.containerdiv input {
float:left;
width:65%;
}

这个会给你这样的东西:

           label1 |input box             |
another label |another input box     |

小开

我发现将标签的显示更改为 inline-block 并设置宽度要容易得多

label {
display: inline-block;
width:100px;
text-align: right;
}

小开

我知道这个问题已经得到了回答，但是我发现了一种新的方法来很好地对齐它们——还有一个额外的好处——参见 http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

基本上你使用标签元素周围的输入和对齐使用:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

然后用 css 对齐:

label {
display:block;
position:relative;
}


label span {
font-weight:bold;
position:absolute;
left: 3px;
}


label input, label textarea, label select {
margin-left: 120px;
}

你不需要任何凌乱的 br 躺在附近为换行-这意味着你可以快速完成多列布局动态
整个行是可点击的。特别是对于复选框，这是一个巨大的帮助。
动态显示/隐藏表单行非常简单(只需搜索输入并隐藏它的父级-> 标签)
您可以为整个标签分配类，使其更清楚地显示错误输入(而不仅仅是输入字段)

小开

<form>
<div>
<label for='username'>UserName</label>
<input type='text' name='username' id='username' value=''>
</div>
</form>

在 CSS 中，必须将标签和输入声明为 display: inline-block，并根据需要给出宽度。希望这个能帮到你。:)

小开

Css 我用来解决这个问题，类似于 Gjaa，但样式更好

p
{
text-align:center;
}
.styleform label
{
float:left;
width: 40%;
text-align:right;
}
.styleform input
{
float:left;
width: 30%;
}

下面是我的 HTML，专门用于一个没有 php 代码的简单注册表单

<form id="registration">
<h1>Register</h1>
<div class="styleform">
<fieldset id="inputs">
<p><label>Name:</label>
<input id="name" type="text" placeholder="Name" autofocus required>
</p>
<p><label>Email:</label>
<input id="email" type="text" placeholder="Email Address" required>
</p>
<p><label>Username:</label>
<input id="username" type="text" placeholder="Username" autofocus required>
</p>
<p>
<label>Password:</label>
<input id="password" type="password" placeholder="Password" required>
</p>
</fieldset>
<fieldset id="actions">


</fieldset>
</div>
<p>
<input type="submit" id="submit" value="Register">
</p>

很简单，我才刚刚开始，但效果很好

小开

接受的答案(以像素为单位设置明确的宽度)使得更改变得困难，并且当用户使用不同的字体大小时会中断。另一方面，使用 CSS 表非常有效:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>

这是一个 JSFiddle: http://jsfiddle.net/DaS39/1/

如果您需要标签右对齐，只需将 text-align: right添加到标签: http://jsfiddle.net/DaS39/

编辑: 另一个快速注意事项: CSS 表还允许您处理列: 例如，如果您想让输入字段占用尽可能多的空间，您可以在表单中添加以下内容

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

在这种情况下，您可能需要将 white-space: nowrap添加到 labels。

小开

在无序列表中插入输入标签。使样式类型为 none。举个例子。

<ul>
Input1
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

对我有用！

小开

只要加上

<form align="center ></from>

只要把对齐放在开始标签。

小开

到目前为止，克莱蒙特的答案是最好的。下面是一个略有改进的答案，显示了不同的可能对齐方式，包括左中右对齐按钮:

label
{	padding-right:8px;
}


.FAligned,.FAlignIn
{	display:table;
}


.FAlignIn
{	width:100%;
}


.FRLeft,.FRRight,.FRCenter
{	display:table-row;
white-space:nowrap;
}


.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}


.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}


.FRRight,.FCRight,.FIRight
{	text-align:right;
}


.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
<div class="FRLeft">
<p class="FRLeft">
<label for="Input0" class="FCLeft">Left:</label>
<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
</p>
<p class="FRLeft">
<label for="Input1" class="FCRight">Left Right Left:</label>
<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
</p>
<p class="FRRight">
<label for="Input2" class="FCLeft">Right Left Left:</label>
<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
</p>
<p class="FRRight">
<label for="Input3" class="FCRight">Right Right Left:</label>
<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
</p>
<p class="FRLeft">
<label for="Input4" class="FCLeft">Left Left Right:</label>
<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
</p>
<p class="FRLeft">
<label for="Input5" class="FCRight">Left Right Right:</label>
<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
</p>
<p class="FRRight">
<label for="Input6" class="FCLeft">Right Left Right:</label>
<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
</p>
<p class="FRRight">
<label for="Input7" class="FCRight">Right:</label>
<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
</p>
<p class="FRCenter">
<label for="Input8" class="FCCenter">And centralised is also possible:</label>
<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
</p>
</div>
<div class="FAlignIn">
<div class="FRCenter">
<div class="FCLeft"><button type="button">Button on the Left</button></div>
<div class="FCCenter"><button type="button">Button on the Centre</button></div>
<div class="FCRight"><button type="button">Button on the Right</button></div>
</div>
</div>
</form>

我在所有标签(padding-right:8px)的右边添加了一些填充，只是为了让这个例子看起来不那么可怕，但是在实际的项目中应该更加小心(在所有其他元素上添加填充也是一个好主意)。

小开

它也可以使用 CSS 完成，没有表或浮点数或固定长度的内容方向改变为 rtl，然后返回到 ltr，但标签必须去后面的每个输入。

要避免这种标记重新排序，只需在 data-*属性中设置标签的文本，并使用 ::after伪元素显示它。我觉得这样就清楚多了。

下面是一个在自定义属性 data-text中设置标签文本并使用 ::after伪元素显示它们的例子，这样我们就不会在将 direction改为 rtl和 ltr时扰乱标记:

form
{
display: inline-block;
background-color: gold;
padding: 6px;
}


label{
display: block;
direction: rtl;
}


input{
direction: ltr;
}


label::after{
content: attr(data-text);
}

<form>
<label data-text="First Name">
<input type="text" />
</label>
<label data-text="Last Name">
<input type="text" />
</label>
<label data-text="E-mail">
<input type="text" />
</label>
</form>