我是 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 的基础知识。
最佳答案
接受的答案(以像素为单位设置明确的宽度)使更改变得困难,并且当您的用户使用不同的字体大小时会中断。另一方面,使用 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
。
关于html - 如何在 HTML 中对齐输入表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4309950/