对齐 HTML5 表单元素答案

【问题标题】：Aligning HTML5 form elements对齐 HTML5 表单元素
【发布时间】：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不匹配，则无用。

标签： css html forms alignment

【解决方案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/

【讨论】：