Question

我是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;
}

我不想使用表格，因为我不想显示表格数据。我正在寻找一种有效和正确的方法来做到这一点。

非常感谢您的帮助。

感谢。 AJ

Answer 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/

Answer 2

试试这个 HTML：

＆LT;       div style =“display：block; position：relative; width：100（或something）px; height：auto; margin：0px auto 0px;”   ＆GT;      将表单标记放在这里
     ＆LT;       / DIV＆GT;

我全神贯过地寻找这个答案，并在W3C学校找到了相关信息并进行了一些试验这在http://validator.w3.org/

验证

对齐HTML5表单元素

2 个答案: