HTML对齐多个表单中的文本框实现代码示例

本篇文章小编给大家分享一下HTML对齐多个表单中的文本框实现代码示例，代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

表单代码如图，还没有加入样式表，表单没有对齐，比较难看，但是HTML又没有提供表单对齐的标签或功能。

html源代码：

    
    


    

        

        

            title:
            
        
        

            username:
            
        
        

            message content:
            
        
        

            
        
        
    

表单显示效果图片：

为了使表单对齐，在HTML中添加如下CSS代码,表单即可对齐：

css;">

添加样式表之后的表单显示效果

实现表单对齐的CSS代码段如下：

        label{
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            
            vertical-align: top;
        }

假设每个表单的父元素为

标签，标签为表单的描述，也就是文本框左边的文字，标签为文本框。为了使标签对齐，只需要设置label标签中的width宽度为一定值即可，比如本例中为150px,因为label标签和input标签同属于p标签，他们是从左到右显示的，指定了label标签的长度，即可使表单的文本框对齐。