通过 HTML 对齐文本框

Aligning textboxes via HTML

提问by Garry

Here is my code:

这是我的代码：

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>

As you can probably guess, this code displays some text and then has some textboxes after this text.

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

My question is this: I am wanting to align all the texboxes so that they are aligned. I have added spaces after the text, yet the textboxes just appear straight after the text, ignoring the spaces that I entered. What is the best, most effective way to do this? Maybe a table?

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

thanks

谢谢

回答by SmithMart

Normally you'd use css to do this for you. in your css file add:

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

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

input{

}

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

Then in the html you would set the labels up next to the textboxes:

然后在 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>

in the css file, the margin-right:30px; line tells it how far apart to put the label and textbox

在css文件中，margin-right:30px; 行告诉它放置标签和文本框相距多远

setting the fieldset width essentially creates a box round it all and you can set it's width if you need to make any labels bigger.

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

Hope that helps.

希望有帮助。

Martyn

马丁

回答by Jukka K. Korpela

<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>

A table is the only way to make the columns aligned so that the first column occupies just the width it needs (the width of the longest label). Any other approach forces you to make a guess on the width, and the results will inevitably vary, and the code will not be robust (the width needs to be adjusted whenever the length of the longest label changes).

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

回答by Vishnu Haridas

In HTML, continuous SPACEs are taken as a single space only. So you need HTML Special Character for the SPACE, that is  

在 HTML 中，连续空格仅被视为单个空格。所以你需要空格的 HTML 特殊字符，即 

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

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

But, this is the dirty way.This is not the standard way to do so. Also, this doesn't sure that the textboxes will align same until you use some mono-space fonts.

但是，这是肮脏的方式。这不是这样做的标准方法。此外，在您使用一些等宽字体之前，这并不确定文本框是否会对齐。

So, you should consider either <TABLE>tag or CSS.

因此，您应该考虑<TABLE>标签或 CSS。

回答by Karthik S

You can also make all the textboxes to appear one below the other in the center of your screen. It will look uniform.

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