2013-07-24 165 views
2

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

+0

移除BR標籤,並把它們飄浮 – Hushme

+0

你可以有標籤左浮動,並輸入正確的浮動您 –

+1

應[瞭解如何使用標籤元素正確(HTTP://www.456bereastreet。 COM /存檔/ 200711/use_the_label_el ement_to_make_your_html_forms_accessible /)。如果'for'屬性與相關輸入的**'id' **不匹配,則無用。 – Quentin

回答

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/

+0

不錯的示例,如何將這個應用到jQuery-Mobile?由於預先定義的元素.attributes。 –

+0

您需要找到控制每個元素的css類的名稱。對於上述內容,您可以在'.ui-input-text {width:auto!important;}'中添加它,並且它應該對齊。 http://jsfiddle.net/VuSX4/2/ – jzm

0

試試這個
HTML:

< div style =「display:block;位置:相對;寬度:100(或某物)px;高度:自動;保證金:0px auto的0像素;」 > 把你的形式標記在這裏
< /DIV>

我到處尋找這個答案,發現在W3C學校的信息,有點試驗和錯誤
這證實在http://validator.w3.org/