4

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

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

您的帮助将不胜感激。

谢谢。阿杰

4

2 回答 2

4

尝试这个：

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/

于 2013-07-24T06:03:38.617 回答
0

试试这个
HTML：

< div style="display:block; position:relative; width:100(or something)px; height:auto; margin:0px auto 0px;" > 把你的表单标记放在这里
</div>

我到处寻找这个答案，发现了 W3C 学校的信息和一些反复试验
这在http://validator.w3.org/上得到验证

于 2014-07-29T10:57:28.323 回答