CSS控制input的位置
為了創(chuàng)建具有美觀外觀的網(wǎng)頁，對表單元素進(jìn)行位置控制是至關(guān)重要的。其中，input元素是最常用的表單控件之一。在本文中，我們將研究使用CSS來控制input元素的位置。
首先，讓我們來看一下如何使用CSS來控制輸入框的寬度和高度。使用以下CSS代碼可以實現(xiàn)輸入框高度和寬度的控制：
pre{
input[type="text"],
input[type="password"],
textarea {
width: 100px;
height: 30px;
}
}
上面的代碼將輸入框和文本區(qū)域的高度設(shè)置為30像素，寬度設(shè)置為100像素。
然后，我們將研究如何控制該元素位于表單中的位置。使用以下CSS代碼可以實現(xiàn)控制輸入框在表單中的位置：
pre{
input[type="text"],
input[type="password"],
textarea {
position: relative;
left: 50%;
margin-left: -50px; /* half of the width of input */
margin-top: 50px;
}
}
上面的代碼在水平中心位置顯示輸入框，并將其垂直移動到表單的頂部。 請注意，我們使用了相對位置，并將left屬性設(shè)置為50％。這意味著該元素的左側(cè)邊緣將位于距離包含元素50％的位置。然后，我們使用margin-left屬性和負(fù)寬度值的一半來水平居中該元素。我們還將輸入框上移了50像素，以將其放在表單的頂部。
最后，我們將學(xué)習(xí)如何使用CSS來控制輸入框的內(nèi)邊距和外邊距。使用以下CSS代碼可以實現(xiàn)控制輸入框的內(nèi)邊距和外邊距：
pre{
input[type="text"],
input[type="password"],
textarea {
padding: 10px;
margin: 10px;
}
}
上面的代碼將輸入框和文本區(qū)域的內(nèi)邊距和外邊距都設(shè)置為10像素。 這意味著文本將與輸入框邊緣保持10像素的距離。
總結(jié)
在本文中，我們學(xué)習(xí)了如何使用CSS控制輸入框的位置、大小、內(nèi)邊距和外邊距。當(dāng)您制作表單時，這些技巧可以幫助您創(chuàng)建更美觀的網(wǎng)頁。