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>

正如您可能猜到的，此代码显示一些文本，然后在此文本后面有一些文本框。

我的问题是：我想对齐所有的texbox，以便它们对齐。我在文本后添加了空格，但文本框只是在文本后面直接显示，忽略了我输入的空格。这样做的最佳，最有效的方法是什么？也许是一张桌子？

感谢

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告诉它放置标签和文本框的距离

设置字段集宽度基本上会创建一个圆形框，如果需要更大的标签，可以设置它的宽度。

希望有所帮助。

Martyn

Answer 2

<table>
<tr><td><label for="txtClassroomName">Classroom name:</label>                
  <td><input type="text" name="txtClassroomName" id="txtClassroomName" size="20">
<tr><td><label for="txtSchoolName">School name:</label>
  <input type="text" name="txtSchoolName" id="txtSchoolName" size="20"><br>

...
</table>

表格是使列对齐的唯一方法，以便第一列仅占据所需的宽度（最长标签的宽度）。任何其他方法都会强制您对宽度进行猜测，结果将不可避免地发生变化，并且代码不会很稳健（只要最长标签的长度发生变化，就需要调整宽度）。

Answer 3

在HTML中，连续SPACE仅作为单个空格。因此，您需要SPACE的HTML特殊字符，即 

Classroom name:    <input type="text" name="txtClassroomName" size="20"><br>

但是，这是一种肮脏的方式。这不是标准的方法。此外，在使用某些单声道空格字体之前，这并不能确保文本框是否对齐。

因此，您应该考虑使用<TABLE>代码或CSS。

Answer 4

您还可以将所有文本框显示在屏幕中央的另一个下方。看起来会很均匀。

通过HTML对齐文本框

4 个答案: