本文共 432 字，大约阅读时间需要 1 分钟。

当我们设计表单文本框布局时，希望布局好看。前边的文字与文本框契合完美。文字上下行对齐。

通常使用 <table> 标签实现代码。其实也可以用 <label> 标签实现 下边是一个例子 如何修改css实现文本框和前边字体右对齐。 HTML代码：

   
   
    
     用户名：
     
    
    
     邮箱：
     
    
    
     个人资料：
     
    
    
     
     
    
   

结果图：

该例是将label这个“容器”变宽。使得其可以任里边的字体自由移动。

该例中<label>中加入文本框前边的字体，将 label 标签设置宽度，

使label宽度足够宽而不会根据<label>标签中字体个数的填充而改变宽度。

再用 text-align 属性设置 label  标签中的字体右对齐。 注意如果仅仅设置了<label>标签的宽度，而不设置其左浮动 float:left ，则不会实现最后的效果。