zoukankan      html  css  js  c++  java
  • 解决checkbox与对应文字不对齐的问题

    最近公司比较忙,所以一直在赶项目,很久没有更新博客了。

    刚才在工作中又遇到了一个问题,下面我来分享一下吧(。・∀・)ノ゙

    问题所在

    我写了一个input,他的类型是checkbox,在他的后面接着label标签进行描述。

    html如下:

    <input type="checkbox" checked="checked" name="sign" id="sign"/>
    <label for="sign">我已阅读并确认**产品服务协议</label>

    可是显示出来的效果可不如我所想Σ(っ °Д °;)っ,checkbox和label的文字并没有对齐(我想大家也经常遇到这种问题吧),我得想办法搞定它!

    如何解决

    我想了一想,试了又试,最后得出了解决方案~

    来!我们看代码!(●'◡'●)

    调整input元素的css

    css:

      #sign{

        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;

      }

    运用改变input的元素类型,设置垂直居中,然后再垫2px的margin!完美!(●'◡'●)

    label怎么用?什么意思?

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    以上都是W3C上的原话,做一个安静的搬运工(ˉ▽ˉ;)...

    简单来说就是点击label,会聚焦到label for的id元素,以我上面的代码为例子,点击“我已阅读并确认**产品服务协议”的文字,那么对应id的checkbox的小勾勾会勾上,相当于点击了checkbox的效果,这样就提高了我们的用户体验,不用去点那个细小的小框框了。

    希望这篇能在你需要它的时候提供一点小小的帮助。

  • 相关阅读:
    线程的取消/撤销 (转)
    Linux 3.0发布有感(转)
    Linux下挂载与解除挂载U盘
    Ubuntu 中文编码设置
    Linux Kernel 3.0新特性概览(转)
    pthread_cond_wait()用法分析
    brk和sbrk及内存分配函数介绍
    [转]Vmware ESX 4上虚拟机 Redhat 5.2(CentOS 5.2)启动在Starting udev 停几个小时
    [贺]通过Oracle 10g OCP的三门考试
    [原]Oracle外部表结合游标完成统计一例
  • 原文地址:https://www.cnblogs.com/nelly0213/p/6606404.html
Copyright © 2011-2022 走看看