对齐HTML5表单元素

我是HTML5新手，所以我可以获得所有帮助。我有三个字段（名字，姓氏和出生日期），我试图将它们排列在一起。我想将这些字段水平和垂直对齐。对齐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

来源

2013-07-24 user2613126

移除BR标签，并把它们飘浮 – Hushme

你可以有标签左浮动，并输入正确的浮动您 –

应[了解如何使用标签元素正确（HTTP：//www.456bereastreet。 COM /存档/ 200711/use_the_label_el ement_to_make_your_html_forms_accessible /）。如果'for'属性与相关输入的**'id' **不匹配，则无用。 – Quentin

试试这个：

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-24 06:03:38 jzm

不错的示例，如何将这个应用到jQuery-Mobile？由于预先定义的元素.attributes。 –

您需要找到控制每个元素的css类的名称。对于上述内容，您可以在'.ui-input-text {width：auto！important;}'中添加它，并且它应该对齐。 http://jsfiddle.net/VuSX4/2/ – jzm

试试这个
HTML：

< div style =“display：block;位置：相对;宽度：100（或某物）px;高度：自动;保证金：0px auto的0像素;” > 把你的形式标记在这里
< /DIV>

我到处寻找这个答案，发现在W3C学校的信息，有点试验和错误
这证实在http://validator.w3.org/

来源

2014-07-29 10:57:28 BolShag

对齐HTML5表单元素

回答

相关问题