表單表格輸入未在HTML中對齊

Question

我在表格中有HTML表單，例如：

 .settings-and-performance-edit-form { display: table; } 

 <form action="" method="post" class="settings-and-performance-edit-form"> <table> <tr> <td> <div class="edit-form-standard-dauer"> <label for="edit-standard-dauer">Standard dauer (Wochen): </label> <input type="text" id="edit-standard-dauer"> </div> </td> </tr> <tr> <td> <div class="edit-form-verlangerung-dauer"> <label for="edit-verlangerung-dauer">Verlängerung Dauer (Wochen): </label> <input type="text" id="edit-verlangerung-dauer"> </div> </td> </tr> </table> 

我已經嘗試過尋找答案，但找不到...有人可以告訴我輸入如何相互正確對齊嗎？

Answer 1

如果沒有CSS，最簡單的方法就是將inputs添加到額外的<td>字段中。 像這樣

 <table> <tr> <td> <label for="edit-standard-dauer">Standard dauer (Wochen): </label> </td> <td> <input type="text" id="edit-standard-dauer"> </td> </tr> <tr> <td> <label for="edit-verlangerung-dauer">Verlängerung Dauer (Wochen): </label> </td> <td> <input type="text" id="edit-verlangerung-dauer"> </td> </tr> </table> 

Answer 2

只需在每個td添加每個字段，如下所示

 .settings-and-performance-edit-form { display: table; } 

 <form action="" method="post" class="settings-and-performance-edit-form"> <table> <tr class="edit-form-standard-dauer"> <td> <label for="edit-standard-dauer">Standard dauer (Wochen): </label> </td> <td> <input type="text" id="edit-standard-dauer"> </td> </tr> <tr> <td class="edit-form-verlangerung-dauer"> <label for="edit-verlangerung-dauer">Verlängerung Dauer (Wochen): </label> </td> <td> <input type="text" id="edit-verlangerung-dauer"> </td> </tr> </table> </form>