编写html页面时常见的问题（二）

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

不能水平居中对齐

在我们写页面的时候，会遇到一些小细节就是不能水平居中对齐，这种情况影响了页面的美观，这也是写页面的质量不过关的一个体现，其实这种情况的页面也有很多，说明写页面的人没有细节处理！例如下面看到的这种情况：就是单选按钮和文字不能水平居中

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

可能大家也知道处理方法，但是就是觉得麻烦，一个好的页面，确实该麻烦的还是要麻烦，因为页面的美观真的很重要！！如果遇到一个盒子里面的两个对象不能很好的使用margin-top来细节调整的话

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

 

实现单选

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

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

如果是更多的单选选择，那么所有的都添name属性，并且值都一样就行

扩大点击的触发区域

很多时候我们会遇到一种情况，就是在点击单选或者复选框时候，我们点击它对应的文字也是可以被选中的，例如我选择"男"，男左边的按钮就会显示被选中，

解决办法：这个也是通过属性就可以实现的，可以给input添加一个id属性，并且给一个值，比如:id="nan";给他对应的文字用label标签环绕，并且给这个标签添加属性for,并且for的取值要跟input的id取值要一样，例如以下：不仅实现了单选，还实现了扩大点击的触发区域！

 如果本文对你有帮助，记得推荐一下哦！

转载于:https://www.cnblogs.com/xcaocao/p/5625927.html