對齊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表單元素

回答

相關問題