html5 - 对齐HTML5表单元素

  显示原文与译文双语对照的内容
0 0

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

时间:原作者:5个回答

0 0

尝试这个:

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/

原作者:
0 0

试试这个
html :

<div style="。显示:块;位置:相对宽度:100 ( 或者某些内容) ) 像素;高度:自动;margin:0px 自动 0像素;"> 将表单标记放在这里处
</div>

我查看了这个答案,找到了W3C学校的信息和一些试验和错误。
这将在 http://validator.w3.org/ 验证。

原作者:
...