在網(wǎng)頁開發(fā)中，form表單是非常常用的元素之一，而進行合理的布局才能使頁面看上去更加美觀，使用CSS可以更好地實現(xiàn)表單的布局。

/*HTML代碼*/
<form>
<label for="name">昵稱：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="提交">
</form>

上面是一個基本的form表單，下面將介紹幾種常用的布局方式。

1.水平布局

將label和input放在同一行，使用CSS的display屬性將它們轉為行內(nèi)元素。

/*CSS代碼*/
form label,input,textarea {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}

2.垂直布局

將label和input放在不同的行，使用CSS的float屬性實現(xiàn)垂直布局。

/*CSS代碼*/
form label {
display: block;
float: left;
width: 20%;
margin-right: 10px;
text-align: right;
}
form input,form textarea {
display: block;
float: left;
width: 70%;
}

3.網(wǎng)格布局

使用CSS的grid屬性實現(xiàn)表單的網(wǎng)格布局。

/*CSS代碼*/
form {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
form label {
grid-column: 1 / 2;
grid-row: auto / span 1;
text-align: right;
}
form input,form textarea {
grid-column: 2 / 3;
grid-row: auto / span 1;
}

通過上述的布局方式，可以使表單更加美觀、易讀，提高用戶的使用體驗。在實際項目中可以根據(jù)需要選擇相應的布局方式。