如何在HTML中对齐输入表单

117

我是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的基本知识。

html  forms  alignment 
— 悠悠
source
在表格之间（如果有的话）之间存在着长期的斗争，您的问题的答案不是例外，<tables>用于表格数据的中间点是缝制，请参见此处的更多信息：stackoverflow.com/questions/83073 /…
— Trufa
完全相同的问题，但答案表明使用<table>标记并引用了W3C： stackoverflow.com/questions/4707332
— Bossliaw

Answers:

62

另一个使用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>
展开摘要

— 串口
source
2
完美，只是为我省去了很多麻烦。
— 无效
它还将我的“提交”按钮扩展到容器的宽度。
— 索拉布·拉娜
4
此解决方案似乎无效。输入元素未左对齐。下表解决方案有效。
— 约翰尼，为什么
1
我没有设定一个明确的宽度，当你可以在没有一个做（见的大风扇我的回答如下）
— 克莱门特
1
使用单选按钮会产生奇怪的结果。单选按钮标签显示在实际单选按钮之后的行。
— wordforthewise 2015年
134

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

— 克莱门特
source
4
我喜欢这个解决方案。这意味着我不必担心页面随着开发过程的发展而不可避免地改变宽度。+1
— 汤姆·洛德
9
@MuhammadUmer因为表格会混淆屏幕阅读器和许多辅助设备，而CSS表格将表示和内容分开。因此，您的表格仍然可以通过屏幕阅读器或阅读助手轻松解析，但显示效果很好。
— 克莱门特
3
好吧，在td中贴标签表明它是组织的表格数据的一部分，例如图表；这里不是这样。此外，使用HTML表格将使将来更改布局或使其适应各种屏幕尺寸（例如手机和平板电脑）变得更加困难。
— 2014年
4
直到今天，我一直在使用相同的@MuhammadUmer参数来坚决抵制CSS表结构！我屈服了，决定尝试一下，终于看到了切换的价值！另外，它的CSS从长远来看使事情变得更容易
— BillyNair
2
您如何使用此解决方案跨列？为了居中对齐提交按钮。
— eugenekr
31

如果您不熟悉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>
— 阿蒙尼特
source
43
快速简单的解决方案。将宗教CSS辩论留给午休，然后完成工作。
— 伊曼纽尔·布尔格
3
@ClarkeyBoy-谁在乎它的工作时间。
— SolidSnake
1
@ClarkeyBoy-最无知的评论？大声笑..我不想在这里与您吵架..如果您想这样做，divs方式可以做到。如果您想这样做，桌子将取决于您。但不要以为所有客户或人们都会在意这一点。他们中的大多数人都关心完成工作
— 。.– SolidSnake
2
@ClarkeyBoy-请阅读以下答案，以及来自W3C的帖子： stackoverflow.com/a/4707368/40411
— J. Polfer 2013年
6
@EmmanuelBourg：这不是CSS表的确切含义吗？在不混淆屏幕阅读器的情况下实现类似表格的布局？该OP询问布局其实是很容易的使用CSS表格来实现（见下文）
— 克莱门特
17

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

label {
    display: inline-block;
    width:100px;
    text-align: right;
}
— 拜伦
source
9

您应该使用一张桌子。就逻辑结构而言，数据是表格形式的：这就是为什么要使其对齐，因为您希望显示标签在二维结构中不仅与它们的输入框相关，而且还与彼此相关。

[考虑如果要显示字符串或数字值而不是输入框，该怎么办。]

— 科林街
source
2
我感谢您的方法。
— Jono 2013年
2

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

这样的事情会做的工作： 

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

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

— 塞缪尔·尤斯塔奇
source
1

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

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

它们易于使用CSS设置样式，并且避免了使用表进行布局的污名。

— 安德鲁
source
使用divs（a的dd左边距约为40px）可以轻松完成此操作，并且避免了任何语义上的混淆。此外，这些都不在同一行上排列标签/输入。
— Hollister 2012年
1

使用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     |
— 加雅
source
您还必须使用clear以避免表格堆叠成较小宽度的方式
— TheMaster
0

传统方法是使用表格。

例：

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

最后，您需要使用最舒适的工具。

提示：表格很容易上手。

— OV Web解决方案
source
1
+1表示他们很容易上手...但是实际上开发人员只应使用表获取数据（请参阅我对另一个答案的完整评论！）
— ClarkeyBoy 2010年
1
使用CSS表同样简单，并且没有相关的可访问性问题。请参阅下面的答案。
— 2014年
0

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

您可以使用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浮动权利问题

— 毛里斯
source
感谢您的示例，但是HTML表单仍然无法解决问题。例如，如果您将其中一个的“名字”更改为“名字”，我将遇到我第一次遇到的相同问题
— yoshyosh 2010年
我已经与设计师合作过，这有点脆弱，IME。对于这种基本布局，98％的时间都可以。尝试变得太复杂，例如两列布局或多行标签，这会变得很困难。
— staticsan
1
@staticsan-如果您了解float，clears和div，则可以使用这种布局很好地工作，实际上，与现代浏览器中的表相比，它们的渲染速度更快，更灵活。
— 毛里求斯2010年
好吧，我以为我了解浮点数，清除数和divs，但是我无法扩展给出的形式而不会破坏它。无论是我的理解上的缺陷还是设计师的实施上的缺陷，事实都是如此。（有趣的是，下一个版本将使用ul标签进行更多的混合设计。）
— staticsan 2010年
0

我知道已经解决了这个问题，但是我发现了一种很好地对齐它们的新方法-额外的好处-请参见http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

基本上，您在输入周围使用label元素，并使用该元素进行对齐：

<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来换行，这意味着您可以快速动态地完成多列布局
  • 整行都是可点击的。特别是对于复选框，这是一个巨大的帮助。
  • 动态显示/隐藏表格行很容易（您只需搜索输入并隐藏其父菜单->标签）
  • 您可以将类分配给整个标签，使其更清楚地显示错误输入（不仅在输入字段周围）
— 尼可
source
不错，但是需要固定的标签宽度。大标签的文本将覆盖输入。
— mauretto
0

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）的右边添加了一些填充，只是为了使示例看起来不那么恐怖，但是在实际项目中应该更谨慎地进行（将填充添加到所有其他元素也是一个好主意）。

— 电子骑士
source
-1

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

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

— PA_Commons
source
-1

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

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

为我工作！

— Vivek Iyer
source
这永远都行不通。UL只会缩进内容的空白处，而不对齐任何内容。将inputs放入LI只会在它们前面添加一个项目符号（是的，它们将作为列表对齐，而不是与标签对齐）。另外，“ Input2”将粘贴到前一个input元素，因为LI不会关闭（没有</li>），并且<li>该“标签” 没有开头，因此，它将被视为普通文本，因此应与普通文本连接。前一个元素。最后，代码有错误，结束<ul/>应为</ul>。
— Cyber​​knight
-2 
<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

在CSS中，必须将标签和输入都声明为display：inline-block并根据需要指定宽度。希望这会帮助你。:)

— ta
source
-4

只需添加 

<form align="center ></from>

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

— 扎克·吉尔
source
这是行不通的，因为form它没有align属性（即使有属性，也不推荐使用样式/ CSS）。另外，结束标记是错误的，应该是</form>。它可以定义style="text-align:center"里面form，你会对齐中心形式的全部内容，但是这不是原来的问题是什么。这将永远不会使标签与它们的输入字段对齐（是的，请确保我在Firefox 75上进行了测试）。
— Cyber​​ynight
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.