這個問題在這里已經有了答案：
![如何垂直對齊 html 表單？[復制]](https://img.uj5u.com/2022/03/31/92eabd4b798940a3a1092deb445dcce7.png)
Clarification: You see how the input areas are completely off. I want those to be EXACTLY perfectly even and matched, so it doesn't look as scuffed as it does currently.
UPDATE 2: Fix I figured it out. Now it's all even and vertical (Though im not saying this is best or the perfect solution, but it solved my current beginner issue/question).
CSS:
form {
width: 10%;
}
![如何垂直對齊 html 表單？[復制]](https://img.uj5u.com/2022/03/31/b7723845143d47039d5c9fab90ceb8b3.png)
UPDATE 3 Proper solution in the answer feed by Nick Vu. Thread closed.
uj5u.com熱心網友回復：
您可以將 adisplay: flex;應用于form元素。
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: left;
}
input {
display: inline-block;
float: left;
}<form action="contact.html" method="GET">
<div>
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div>
<label for="lname">Lastname</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>uj5u.com熱心網友回復：
我認為您正在尋找與內容行對齊和列對齊的表格顯示
form {
display: table;
}
div {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}<form action="contact.html" method="GET">
<div class="flexbox">
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div class="flexbox">
<label for="lname">Lastname Testing</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453132.html
上一篇：如何創建隱藏/顯示切換