编写html页面时常见的问题(二)

此次我接着说几个编写页面时常见的另外几个问题。spa

不能水平居中对齐对象

在咱们写页面的时候,会遇到一些小细节就是不能水平居中对齐,这种状况影响了页面的美观,这也是写页面的质量不过关的一个体现,其实这种状况的页面也有不少,说明写页面的人没有细节处理!例以下面看到的这种状况:就是单选按钮和文字不能水平居中input

有的人会给按钮加一个margin-top,结果看到的是这样的,只是把总体距离顶部的距离拉开了,方法

可能你们也知道处理方法,可是就是以为麻烦,一个好的页面,确实该麻烦的仍是要麻烦,由于页面的美观真的很重要!!若是遇到一个盒子里面的两个对象不能很好的使用margin-top来细节调整的话im

解决办法:就是分别让他们浮动,这个时候再使用margin-top就为所欲为了;这种方法在遇到左右对齐不能使用margin-top来控制的状况都比较实用,好比文字和输入框,或者两个并排的行内标签等都是用这种方式处理!margin

 

实现单选top

既然说到了单选按钮,那我想接着说的是常常看到注册页面上,相似于性别的选择,只能选一种的方法,紧接着刚才的案例(为了简便理解,这里暂时没有处理左右对齐的问题):img

解决办法:经过对想要进行单选的这一组按钮添加一个属性name,而且他们的值都要同样,例如:name="sex";标签

若是是更多的单选选择,那么全部的都添name属性,而且值都同样就行co

扩大点击的触发区域

不少时候咱们会遇到一种状况,就是在点击单选或者复选框时候,咱们点击它对应的文字也是能够被选中的,例如我选择"男",男左边的按钮就会显示被选中,

解决办法:这个也是经过属性就能够实现的,能够给input添加一个id属性,而且给一个值,好比:id="nan";给他对应的文字用label标签环绕,而且给这个标签添加属性for,而且for的取值要跟input的id取值要同样,例如如下:不只实现了单选,还实现了扩大点击的触发区域!

 若是本文对你有帮助,记得推荐一下哦!

相关文章
相关标签/搜索