如何在 HTML 中对齐输入表单答案

【问题标题】：How to align input forms in HTML如何在 HTML 中对齐输入表单
【发布时间】：2011-05-17 15:12:33
【问题描述】：

我是 HTML 新手，我正在尝试学习如何使用表单。

到目前为止，我遇到的最大问题是对齐表格。这是我当前的 HTML 文件的示例：

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

这样做的问题是，与名字和姓氏相比，“电子邮件”之后的字段框在间距方面大不相同。什么是“正确”的方法来让他们基本上“排队”？

我正在尝试练习良好的形式和语法...很多人可能会使用 CSS 我不确定，到目前为止我只学习了 HTML 的基础知识。

【问题讨论】：

when 表（如果有的话）之间一直存在争斗，您的问题的答案不是例外，中间点接缝是用于表格数据，请参见此处：stackoverflow.com/questions/83073/…
完全相同的问题，但答案建议使用带有 W3C 引用的标记：stackoverflow.com/questions/4707332

标签： html forms alignment

【解决方案1】：

接受的答案（以像素为单位设置显式宽度）使得更改变得困难，并且当您的用户使用不同的字体大小时会中断。另一方面，使用 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。

【讨论】：

我喜欢这个解决方案。这意味着我不必担心我的列随着页面的发展而不可避免地改变宽度。 +1
@MuhammadUmer 因为表格会混淆屏幕阅读器和许多辅助设备，而 CSS 表格将表示和内容分开。因此，您的表单仍然很容易被屏幕阅读器或阅读助手解析，而且显示效果很好。
嗯，td 中的合适标签表明它是有组织的表格数据的一部分，如图表；这不是这里的情况。此外，使用 HTML 表格会使将来更改布局或使其适应各种屏幕尺寸（想想手机和平板电脑）变得更加困难。
直到今天，我一直强烈反对使用 @MuhammadUmer 提出的相同论点的 CSS 表结构！我屈服了，决定尝试一下，终于看到了切换的价值！另外，它的 CSS，从长远来看让事情变得更容易
如何使用此解决方案跨列？为了居中对齐提交按钮。

【解决方案2】：

另一个例子，这使用了 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>

【讨论】：

完美，为我省去了很多麻烦。
它还将我的“提交”按钮扩展到容器的宽度。
此解决方案似乎不起作用。输入元素不是左对齐的。下面的表格解决方案有效。
我不喜欢设置明确的宽度，如果你可以不设置宽度（见下面的my answer）
这会给单选按钮带来奇怪的结果。单选按钮标签显示在实际单选按钮之后的行。

【解决方案3】：

如果您是 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 辩论留到午休时间，然后完成工作。
@ClarkeyBoy - 只要它完成工作，谁在乎。
@ClarkeyBoy - 最无知的评论？大声笑.. 我不想在这里和你发生争执.. 如果你想这样做，那么 divs 方式就这样做。如果你想这样做，表由你决定。但不要假设所有的客户或人们都会关心这一点。他们中的大多数人都关心完成工作..
@ClarkeyBoy - 请阅读此答案以及来自 W3C 的帖子：stackoverflow.com/a/4707368/40411
@EmmanuelBourg：这不正是 CSS 表格的用途吗？在不混淆屏幕阅读器的情况下实现类似表格的布局？ OP 要求的布局实际上很容易使用 CSS 表实现（请参阅below）

【解决方案4】：

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

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

【讨论】：

我喜欢这种方法——它简单而优雅。我会做的唯一评论是使用 em 或 ew 而不是 px 来改进缩放，

【解决方案5】：

你应该使用一张桌子。作为逻辑结构的问题，数据是表格的：这就是你希望它对齐的原因，因为你想表明标签不仅与它们的输入框相关，而且彼此相关，在一个二维结构。

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

【讨论】：

我很欣赏你的方法。

【解决方案6】：

为此，我更喜欢保持正确的 HTML 语义，并尽可能使用简单的 CSS。

这样的事情就可以了：

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

但是有一个缺点：您可能必须为每个表单选择正确的标签宽度，如果您的标签可以是动态的（例如 I18N 标签），这并不容易。

【讨论】：

【解决方案7】：

使用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     |

【讨论】：

您还必须使用clear 来避免表格堆积如小宽度

【解决方案8】：

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

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

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

【讨论】：

这与divs 一样容易完成（dd 的左边距只有 ~40px），并且避免了任何语义混淆。此外，这些都没有将标签/输入排在同一行。

【解决方案9】：

我知道这已经得到解答，但我找到了一种新的方法来很好地对齐它们 - 有一个额外的好处 - 请参阅 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 来换行 - 这意味着您可以快速动态地完成多列布局
整行都是可点击的。尤其是对于复选框来说，这是一个巨大的帮助。
动态显示/隐藏表单行很容易（您只需搜索输入并隐藏其父项 -> 标签）
您可以为整个标签分配类，使其更清晰地显示错误输入（不仅在输入字段周围）

【讨论】：

不错，但需要固定标签宽度。大标签的文本会覆盖输入。

【解决方案10】：

Clément 的回答是迄今为止最好的。这是一个稍微改进的答案，显示了不同的可能对齐方式，包括左中右对齐的按钮：

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) 的右侧添加了一些填充，只是为了让示例看起来不那么可怕，但在实际项目中应该更仔细地完成（向所有其他元素添加填充也是好主意）。

【讨论】：

【解决方案11】：

传统的方法是使用表格。

例子：

<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、有序列表和无序列表中，您可以完成相同的布局。

最后，你会想要使用你最熟悉的东西。

提示：表格很容易上手。

【讨论】：

+1 表示它们很容易上手......但实际上开发人员应该只使用表格来获取 data （请参阅我对另一个答案的评论以获得完整的咆哮！）
使用 CSS 表格同样简单，并且没有相关的可访问性问题。请参阅下面的my answer。

【解决方案12】：

对于最基本的内容，您可以尝试在表格中对齐它们。但是使用表格不利于布局，因为表格是用于内容的。

您可以使用的是 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 */

HTML

<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 float right problems

【讨论】：

感谢示例，但是 HTML 表单仍然不能解决问题。例如，如果您将其中一个中的“名字”更改为“姓名”，我最终会遇到与第一次相同的问题
我与设计师合作过，它有点脆弱，IME。对于这个基本布局，98% 的时间都可以。尝试变得太复杂，例如两列布局，或者多行标签，都很难。
@staticsan - 如果您了解浮动、清除和 div，则可以很好地使用此类布局，事实上，与现代浏览器上的表格相比，它们的渲染速度更快且更灵活。
嗯，我以为我理解浮动、清除和 div，但我无法扩展我所获得的形式而不破坏它。无论是我的理解上的缺陷还是设计者的实现，事实仍然是它很脆弱。（有趣的是，下一个版本将更多地使用ul 标签的混合设计。）

【解决方案13】：

也可以通过将内容方向更改为rtl，然后返回ltr，使用 CSS 来完成，无需表格或浮点数或固定长度，但标签必须在每个输入之后。

为避免这种标记重新排序，只需在data-* 属性中设置标签的文本，并使用::after 伪元素显示它。我认为它变得更加清晰。

这是一个示例，在名为 data-text 的自定义属性中设置标签文本并使用 ::after 伪元素显示它们，因此我们在将 direction 更改为 rtl 和 @ 时不会混淆标记987654329@:

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>

【讨论】：

【解决方案14】：

我用来解决这个问题的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>

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

【讨论】：

【解决方案15】：

在无序列表中插入输入标签。将样式类型设为无。这是一个例子。

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

为我工作！

【讨论】：

这永远行不通。 UL 只会将内容从边缘缩进，而不是对齐任何东西。将inputs 放入LI 只会在它们之前添加一个项目符号（是的，它们将作为列表对齐，而不是与标签对齐）。此外，“Input2”将坚持之前的 input 元素，因为 LI 未关闭（没有 </li>）并且该“标签”没有起始 <li>，因此将对其进行处理因此，应该将普通文本连接到前一个元素。最后，代码有错误，关闭<ul/>应该是</ul>。

【解决方案16】：

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

在 CSS 中，您必须将标签和输入声明为 display: inline-block 并根据您的要求提供宽度。希望这会帮助你。 :)

【讨论】：

【解决方案17】：

只需添加

<form align="center ></from>

只需将对齐放在开始标签中即可。

【讨论】：

这是行不通的，因为form 没有align 属性（即使有，也将不推荐使用样式/CSS）。另外，结束标签是错误的，应该是</form>。可以在form 中定义style="text-align:center"，将表单的全部内容对齐在中心，但这不是最初的问题。这永远不会将标签与它们的输入字段对齐（是的，我在 Firefox 75 上测试过，只是为了确定）。