当各个input框前面名字长度不等时,让上下input框对齐方法汇总

当各个input框前面名字长度不等时,让上下input框对齐方法汇总

我们常常会遇到这样的情形,因为多写了一个中文导致框框突出,造成了难看的效果。

方案一:用 填充,不推荐。

用户名:

密码:   

邮箱:   

效果还是有瑕疵的:

方案二:使用table标签进行布局,主流推荐。

用户名:
密码:
邮箱:

方法三:用label标签来对齐,需要调整min-width参数


方法四:利用text-align: right;属性,需要看自己的情况调整width参数

用户名:

密码:

确认密码:

方法五:利用input框的margin-left属性,也是需要酌情调整参数px的大小

用户名:

密码:

确认密码:

方法六:利用定位属性position: relative属性,需要酌情调整left参数px的大小

用户名:

密码:

确认密码:

方法七:利用float: right浮动属性,但必须要清除浮动带来的弊端clear: both

用户名:

密码:

确认密码:

方法八:利用行内样式span标签实现,推荐。

用户名:

密码:

确认密码:

如果还要其他的方式,欢迎大家评论区留言进行补充。

相关推荐

刘诗雯横扫武杨世界杯夺冠 365bet足球信誉开户

刘诗雯横扫武杨世界杯夺冠

📅 07-14 👁️ 5296
科目四多少分及格 365娱乐游戏

科目四多少分及格

📅 09-26 👁️ 1517