通过 HTML 对齐文本框

Question

这是我的代码：

 Classroom name:                <input type="text" name="txtClassroomName" size="20"><br>
School name:                   <input type="text" name="txtSchoolName" size="20"><br>
School contact email address:  <input type="text" name="txtSchoolEmail" size="20"><br>
School address:                <input type="text" name="txtSchoolAddress" size="20"><br>
School telephone number:       <input type="text" name="txtTelephoneNumber" size="20"><br>

正如您可能猜到的那样，这段代码显示了一些文本，然后在该文本之后有一些文本框。

我的问题是：我想对齐所有文本框，以便它们对齐。我在文本后添加了空格，但文本框直接出现在文本后，忽略了我输入的空格。最好、最有效的方法是什么？也许是一张桌子？

谢谢

原文由 Garry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通常你会使用 css 来为你做这件事。在你的 css 文件中添加：

 label{
display:inline-block;
width:200px;
margin-right:30px;
text-align:right;
}

input{

}

fieldset{
border:none;
width:500px;
margin:0px auto;
}

然后在 html 中，您将在文本框旁边设置标签：

 <fieldset>
<label for="txtClassroomName">Classroom name:</label><input type="text" name="txtClassroomName" size="20">
<label for="txtSchoolName">School name:</label><input type="text" name="txtSchoolName" size="20">
<label for="txtSchoolEmail">School contact email address:</label><input type="text" name="txtSchoolEmail" size="20">
<label for="txtSchoolEmail">School address:</label><input type="text" name="txtSchoolAddress" size="20">
<label for="txtSchoolEmail">School telephone number:</label><input type="text" name="txtTelephoneNumber" size="20">
</fieldset>

在 css 文件中，margin-right:30px; line 告诉它放置标签和文本框的距离

设置字段集宽度实质上会创建一个围绕它的框，如果您需要使任何标签更大，您可以设置它的宽度。

希望有所帮助。

马丁

原文由 SmithMart 发布，翻译遵循 CC BY-SA 3.0 许可协议