对齐 HTML5 表单元素
Posted
技术标签:
【中文标题】对齐 HTML5 表单元素【英文标题】：Aligning HTML5 form elements 【发布时间】：2013-07-23 10:55:01 【问题描述】：我是 html5 的新手，所以我能得到的所有帮助都非常感谢。我有三个字段（名字、姓氏和出生日期），我正在尝试将它们对齐。我想将字段水平和垂直对齐。
到目前为止，这是我的简单代码：
<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<form>
<label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
<label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
<label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br>
<form> </body> </html>
这是我的 CSS：
input[type=text]
border: 1px solid #D4E2F1;
input[type=date]
border: 1px solid #D4E2F1;
input[type=color]
border: 1px solid #D4E2F1;
我不想使用表格，因为我不想显示表格数据。我正在寻找一种有效且正确的方法来做到这一点。
您的帮助将不胜感激。
谢谢。 阿杰
【问题讨论】：
去掉br标签并浮动 标签可能向左浮动，输入可能向右浮动。 你应该learn how to use the label element properly。如果for属性与关联输入的id不匹配，则无用。
【参考方案1】：
试试这个：
HTML：
<form class="user-form">
<div class="field">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" size="50" autofocus />
</div>
<div class="field">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" size="50" />
</div>
<div class="field">
<label for="birthdate">Birth Date:</label>
<input type="date" name="bdate" size="50" />
</div>
<form>
CSS：
.user-form padding:20px;
.user-form .field padding: 4px; margin:1px; background: #eee;
.user-form .field label display:inline-block; width:120px; margin-left:5px;
.user-form .field input display:inline-block;
jsFiddle：http://jsfiddle.net/VuSX4/
【讨论】：
不错的示例，如何将其应用于 jQuery-Mobile ？因为预定义的元素 .attributes . 你需要找到控制每个元素的css类的名称。对于上述内容，您可以添加.ui-input-text width:auto !important;，它应该是对齐的。 jsfiddle.net/VuSX4/2【参考方案2】：
试试这个 HTML：
将您的表单标记放在这里
我到处寻找这个答案，并在 W3C 学校找到了信息，并进行了一些试验和错误 这验证了http://validator.w3.org/
【讨论】：
以上是关于对齐 HTML5 表单元素的主要内容，如果未能解决你的问题，请参考以下文章