美化表單控制元素對齊
阿新 • • 發佈：2019-02-08
平時製作表單之時，比如說註冊資訊表單，這時需要將表單元素對齊，不然視覺效果特別差，所以這裡介紹幾個方法解決這個問題。
預設表單：
第一個方法就是簡單地將form用table來製作，將label放在一個td，而input放在另一個td中，並設定其對齊方式，這種方法是最早的使用方法，也是最方便的一種方法。
程式碼範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head （這裡可以參考一番，程式碼簡單，並沒有什麼難度。）
第二種方法是改用div來佈局form就使用另一種方法，將label固定寬度來實現。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
form {
margin-bottom: 18px;
}
.formField {
overflow: auto;
width: 100%;
margin: 5px 0;
}
label {
min-width: 130px;
float: left;
display: block;
margin-right: 5px;
text-transform: capitalize;
}
.formText {
display: block;
float: left;
}
</style>
</head>
<body>
<form action="./" method="post" class="form">
<div class="formField clearfix">
<label for="firstName">first name:</label>
<input type="text" class="formText" id="firstName"/>
</div>
<div class="formField clearfix">
<label for="lastName">last name:</label>
<input type="text" class="formText" id="lastName" />
</div>
<div class="formField clearfix">
<label for="email">email address:</label>
<input type="text" class="formText" id="email"/>
</div>
<div class="formField clearfix">
<label for="blog">blog:</label>
<input type="text" class="formText" id="blog"/>
</div>
</form>
</body>
</html>
效果如圖：
