input【type="checkbox"】标签与字体对齐

2019-06-06 17:57:57


参考地址  input【type="checkbox"】标签与字体对齐  可惜的是苹果电脑浏览器并不适用第三种方法


今天分享一个比较实用的技巧,在实际项目中我们会经常遇到表单的input标签多选和单选的问题,但是往往由于标签自身的样式和我们项目的风格很不搭调,就不能实现了,今天就来告诉大家怎么去实现吧。

第一种:利用伪类:(开源中国)

需要注意的是:在页面布局中,还是有input【type=checkbox】的:

它的样式如下所示:

 

 后面就是通过js脚本来控制它去实现了;

第二种:采用图片

这是一个树形控件zTree 

注意事项:图片最好做好两种状态图,并且合并成精灵图,注意类名的应用,指引入一次,后面的修改background-position: 0 0;就可以了;

 第三种:下面推荐3种方法实现checkbox/input文本框与文字对齐:

1.使用css实现文本对齐:

1
<input type="checkbox" class="vat"><label class="vat">这是文字</label>

  注意:不要随意加样式添加在行内,不方便后期的样式管理.

1
.vat{vertical-align:top}

 2.使用label中的for属性对齐

1
<input type="checkbox" id="more" /> <label for="more">对齐是想要的效果</label>

 3.使用label包裹整个input和文字

1
<label><input type="radio"/>男</label>


  • 2020-03-06 22:28:05

    git中submodule子模块的添加、使用和删除

    执行成功后,git status会看到项目中修改了.gitmodules,并增加了一个新文件(为刚刚添加的路径) git diff --cached查看修改内容可以看到增加了子模块,并且新文件下为子模块的提交hash摘要 git commit提交即完成子模块的添加

  • 2020-03-09 21:34:48

    Android TV 包安装成功后找不到启动图标

    生成APK文件,用U盘插入到小米盒子上,然后点击安装,提示安装成功。 可是找不到启动图标,安装成功的弹窗也没有打开的选项。 而我之前测试装的一款手机应用是可以找到启动图标的。

  • 2020-03-09 21:37:10

    安卓Tv端App开发与手机端的开发的区别

    因为大部分电视机的配置一般都比手机低,但是电视机一般都是用来看视频的,所以在做视频解码的时候,因为电视机配置比较低,所以大多数手机运行流畅的播放器在电视机上面都会卡顿,或者出现一些其他的问题,经过我同事长时间的测试,认为百度播放器跟小米播放器比较适合电视机作为播放器开发使用。如果你们要选择一个播放器,要先拿一个demo去很多台不同类型的电视机去测试,因为网络上面的播放器在电视机卡的真的很多,先测试好了再使用可以节约大家的时间。

  • 2020-03-09 22:11:39

    聊聊真实的 Android TV 开发技术栈

    智能电视越来越普及了,华为说四月发布智能电视跳票了,一加也说今后要布局智能电视,在智能电视方向,小米已经算是先驱了。但是还有不少开发把智能电视简单的理解成手机屏幕的放大,其实这两者并不一样。