解决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的效果,这样就提高了我们的用户体验,不用去点那个细小的小框框了。

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

 

转载于:https://www.cnblogs.com/nelly0213/p/6606404.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/355961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

scala akka_使用Scala,Play和Akka连接到RabbitMQ(AMQP)

scala akka在本文中&#xff0c;我们将研究如何从Scala连接到RabbitMQ&#xff0c;以便可以从应用程序中支持AMQP协议。 在此示例中&#xff0c;我将使用Play Framework 2.0作为容器&#xff08;有关更多信息&#xff0c;请参阅我在该主题上的其他文章 &#xff09;在其中运行应…

linux中服务器之间的跳转,linux之***服务器间ip隧道跳转多ip路由走向分流(系真实案例)...

本文系统Centos6.0&#xff1b;这里的***服务以pptpd为例&#xff1b;其中底层涉及到pptpdfreeradiusmysql认证&#xff1b;本文系真实案例&#xff1b;leader需求大多是这样的&#xff0c;节约成本还要达到所需要的效果&#xff1b;没办法&#xff0c;总的做个效果出来&#x…

POJ2503 Babelfish map或者hash_map

POJ2503 这是一道水题&#xff0c;用Map轻松AC。 不过&#xff0c;可以拿来测一下字符串散列&#xff0c; 毕竟&#xff0c;很多情况下map无法解决的映射问题需要用到字符串散列。 自己生成一个质数&#xff0c; 随便搞一下。 #include<iostream> #include<cstdio>…

使用JBoss EAP 7的HTTP / 2

就在几天前&#xff0c;新的JBoss EAP 7 ALPHA版本已经发布。 而且我已经写过关于如何开始使用它的博客。 一个非常有趣的部分是HTTP / 2支持&#xff0c;它已作为技术预览添加。 它由新的Web服务器Untertow提供。 HTTP / 2通过压缩头并在同一TCP连接上多路复用多个流来减少延迟…

linux树莓派 ssh密码,树莓派之SSH连接经验

打开SSH服务执行raspi-configsudo raspi-config选择InterfacingOptions选项&#xff0c;回车选择SSH&#xff0c;回车Windows下客户端推荐使用putty这个免费开源的SSH客户端。下载地址在红框处填入树莓派的IP地址&#xff0c;点击右下角的Open即可。不过&#xff0c;putty的默认…

linux嵌入式面试题合集,嵌入式linux面试题解析(一)——ARM部分二

嵌入式linux面试题解析(一)——ARM部分二1、描述一下嵌入式基于ROM的运行方式基于RAM的运行方式有什么区别。基于RAM的运行方式&#xff1a;需要把硬盘和其他介质的代码先加载到ram中&#xff0c;加载过程中一般有重定位的操作&#xff1b;基于ROM&#xff1a;没有上面的操作。…

Unity应用架构设计(1)—— MVVM 模式的设计和实施(Part 2)

MVVM回顾 经过上一篇文章的介绍&#xff0c;相信你对MVVM的设计思想有所了解。MVVM的核心思想就是解耦&#xff0c;View与ViewModel应该感受不到彼此的存在。 View只关心怎样渲染&#xff0c;而ViewModel只关心怎么处理逻辑&#xff0c;整个架构由数据进行驱动。不仅View与View…

apache camel_REST端点,可使用Apache Camel进行集成

apache camelREST是一种用于组织资源的体系结构样式&#xff0c;当应用于基于HTTP的服务时&#xff0c;REST可以构建无状态&#xff0c;分离的可伸缩服务。 HTTP方法&#xff0c;HTTP标头和mime类型都允许开发人员实现REST样式。 诸如Jersey和Fuse Services Framework&#xff…

Linux读取SSD的smart信息,使用smartmontools查看SSD的“秘密”信息

仍然担心看不到sm841中的温度吗&#xff1f;您是否仍对Toshiba Q pro看不见写入量和使用寿命值感到不安&#xff1f;为了查看M4 / 00的写入量&#xff0c;您是否仍在使用C300固件升级程序重新启动到纯DOS并麻烦地运行命令&#xff1f;想知道在协议级别上SSD出了什么问题吗&…

Linux查看系统信息的一些命令及查看已安装软件包的命令

系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostname # 查看计算机名 # lspci -tv # 列出所有PCI设备 # lsusb -tv # 列出所…

5条Java记录规则

日志记录是一个关键因素&#xff0c;在软件开发过程中应始终将其考虑在内。 当生产中发生不良情况时&#xff0c;日志文件通常是我们进行故障分析的起点。 而且&#xff0c;通常&#xff0c;它们是我们掌握的唯一信息&#xff0c;可以了解发生了什么以及问题的根本原因。 正确…

linux 离线安装中文字库,centos7 离线安装字体fontconfig

起因&#xff1a;最近做了个flowable然而linux下乱码&#xff0c;发现需要安装字体包在线&#xff1a;直接 yum -y install fontconfig&#xff1b;yum -y install ttmkfdir&#xff1b;配置下即可。拓展&#xff1a;离线所需rpm包如何获取&#xff1f;百度不好找&#xff0c;找…

锁定机制和数据并发管理(笔记)

共享锁和排它锁 排它锁&#xff1a;当某一个会话正在更新某一行&#xff0c;为了防止其他会话修改这一行&#xff0c;这行会被锁定这种锁称为排他锁。被排他锁锁定的行仍然可以被其他会话读取。 共享锁&#xff1a;在一个表上放置共享锁的目的是为了防止其他会话获得这个表上的…

linux防火墙配置说明,Linux防火墙配置命令参数说明

规则操作参数说明&#xff1a;-A&#xff1a;在所选择的链末添加一条或更多规则&#xff1b;-D&#xff1a;从所选链中删除一条或更多规则。有两种方法&#xff1a;把被删除规则指定为链中的序号(第一条序号为1)&#xff0c;或者指定为要匹配的规则&#xff1b;-R&#xff1a;从…

【react.js + hooks】useGuide 创建用户引导视图

有的时候用户可能对网站上的一些操作流程感到困惑&#xff0c;这时候我们需要为用户创建引导视图。为了插入指引而专门去更改组件的渲染函数&#xff0c;显然是不合逻辑的&#xff0c;创建指引视图应该是一种对源代码低侵入的行为&#xff0c;我们可以遵循某一套约定&#xff0…

使用递归算法结合数据库解析成java树形结构

使用递归算法结合数据库解析成java树形结构 1、准备表结构及对应的表数据a、表结构&#xff1a; create table TB_TREE ( CID NUMBER not null, CNAME VARCHAR2(50), PID NUMBER //父节点 ) b、表数据&#xff1a; insert into tb_tree (CID, CNAME, PID) values (1, 中国, 0);…

ug11 linux,UG11.0升级包MP02Win#Linux系统下载就上UG网

UG11.0软件又出升级包啦&#xff01;抽空可以为NX升级啦&#xff0c;从11.0发布到现在&#xff0c;近三个月了&#xff0c;每一次版本的更新&#xff0c;都会带来较多功能的改善&#xff0c;以及对错误BUG的有效处理&#xff0c;下图为升级后的UG11.0软件&#xff1b;UG11.0升级…

akka 异常处理_使用Akka处理1000万条消息

akka 异常处理Akka演员承诺并发。 有什么更好的模拟方法&#xff0c;看看使用商品硬件和软件处理1000万条消息需要花费多少时间&#xff0c;而无需进行任何低级调整。我用Java编写了整个1000万条消息的处理过程&#xff0c;整个结果令我惊讶。 当我在具有i5 – 4核心&#xff0…

20155330 2016-2017-2 《Java程序设计》第五周学习总结

20155330 2016-2017-2 《Java程序设计》第五周学习总结 教材学习内容总结 学习目标 理解异常架构掌握try...catch...finally处理异常的方法会用throw,throws理解Collection和Map架构会用常见的数据结构和算法了解Lambada和泛型第八章 章节主要内容 小结 Throwwable定义了取错误…

yum安装odbc驱动linux,在CentOS上离线配置PostgreSQL ODBC数据源

一、问题提出内网的一台CentOS服务器&#xff0c;需配置PostgreSQL ODBC。如果可以连接Internet&#xff0c;此工作很容易&#xff0c;使用yum install自动安装相应依赖包后简单配置即可。但当置于内网环境时&#xff0c;事情就有些麻烦&#xff0c;需要事先手工下载各个依赖包…