Posted on | by liu
在网页制作过程中，大家经常会遇到需要多个文本框并排显示的情况。这时候，大家需要使用CSS技术来对这些文本框进行对齐。
首先，在HTML文件中创建多个文本框，在每个文本框外面加上div标签，如下所示：
<div class="container">
<input type="text" class="textfield">
</div>
<div class="container">
<input type="text" class="textfield">
</div>
大家为每个文本框外面加上了一个class为container的div标签，以及一个class为textfield的文本框输入框。
接下来，大家可以使用CSS的display属性来实现多个文本框的对齐。display属性可以控制元素的显示方式，常见的取值有block、inline、inline-block等。
在这里，大家选择使用inline-block属性，将每个container包裹起来的div标签设为inline-block，如下所示：
.container {
display: inline-block;
}这样一来，每个文本框所在的div标签就会像一个行内元素一样对齐，而不是默认的块级元素。
但是，这样对齐的结果往往不够精确，还需要通过对每个文本框输入框进行改变来达到更好的对齐效果。
比如，大家可以给每个文本框输入框设定一个固定的宽度，而不是默认的100%宽度，同时把它们的垂直对齐方式设为middle，如下所示：
.textfield {
width: 100px;
vertical-align: middle;
}这样一来，大家就可以实现多个文本框的水平对齐了。
综上所述，使用CSS技术对多个文本框进行对齐，需要在HTML文件中加上class为container的div标签，并使用display属性将它们设为inline-block，在样式表中给每个文本框输入框设定固定的宽度，并将垂直对齐方式设为middle。