表單是網(wǎng)頁設(shè)計(jì)中常用的工具，可以收集用戶的信息或數(shù)據(jù)。不過，如果表單的元素沒有對(duì)齊，會(huì)影響用戶的體驗(yàn)。為了讓表單元素對(duì)齊，我們需要使用 HTML 的代碼。

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>

上面的代碼展示了一個(gè)包含文本輸入框和密碼輸入框的表單，并使用了 label 元素來描述每個(gè)輸入框的意義。為了讓這些元素對(duì)齊，我們可以使用 CSS 的 display 屬性來設(shè)定它們的布局方式。

label {
display: inline-block;
width: 100px;
text-align: right;
margin-right: 20px;
}
input {
display: inline-block;
width: 200px;
margin-bottom: 10px;
}

上面的代碼使用了垂直對(duì)齊的方式，將 label 元素和 input 元素放置在一起。具體來說：

• label 元素使用了 display: inline-block 屬性，使其成為行內(nèi)塊元素。同時(shí)，為了控制所占空間的寬度，我們還需要指定一個(gè) width 屬性和一個(gè)右邊距 margin-right。
• input 元素也使用了 display: inline-block，然后還指定了一個(gè)寬度和下邊距 margin-bottom，這樣在多個(gè)表單元素之間不會(huì)產(chǎn)生重疊。

通過這樣的設(shè)置，我們可以讓表單元素對(duì)齊，同時(shí)給用戶帶來更好的體驗(yàn)。