流程顺序表单 html,在html – 表格或流程中进行表单布局的最佳实践?

我不知道你们,但我没有使用太多的标记来进行表单布局.

这是一个简单登录表单的标记(没有布局标记,即div,表等)

Username

Password

这是表单的CSS

label,input{float:left}

label,input[type="submit"]{clear:left}

这是结果

令人惊奇的是:

>缺乏加价

>缺乏CSS

>灵活性

如果查看css,标签元素将被清除(并向左浮动).这意味着标签将与其他输入一起浮动,但每个标签都是一个新行.

这使得添加额外输入变得非常容易.甚至输入后的验证消息

以此表格为例

Name

Password

D.O.B.

有了这个CSS

label,input[type="submit"]{clear:left}

input[name^="dob_"]{width:44px;margin:2px}

label{width:70px}

我们明白了

真的很简单:)

使用这个概念,您可以创建大量的可能性,您将永远不必再使用表格进行布局!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值