写过Web页面的朋友大概都曾遇到过这样的问题:checkbox与说明文字(比如一个label标签或一个a标签)无法对齐,要不是checkbox上浮了,要不是说明文字上浮。
以前遇到过这个问题,但是都直接忽视,并未深究。今天要解决项目中遗留下的界面显示问题,这个问题终于绕不过去了,因为它真的是无处不在。
今天,借助于伟大的google,同时自己不断试验,终于解决了这个“老大难”的“历史遗留问题”。现将经验分享如下:
其实很简单,真的灰常简单,把要对齐的每个标签,都加一个css属性:
vertical-align:middle;
比如说我有一个checkbox,后面跟一个超链接,原来的HTML代码是这样的:
<input type=checkbox id="the_id" name=checkbox style="vertical-align:middle;" /> <a href="the_link" title="the_title" ></a>
原来的效果图:
修改之后是这样的:
<input type=checkbox id="theId" name=checkbox style="vertical-align:middle;" /> <a href="the_link" title="the_title" style="vertical-align:middle;" ></a>
效果如图:
这篇文章有针对此类问题的详细分析:
表单元素与提示文字无法对齐的问题(input,checkbox文字对齐)
相关推荐
checkbox与文字不对齐会影响美观本文将将介绍解决方法:需要checkbox居中对其 然后文字也要居中对齐,checkbox在FF和IE下表现不一样;不管你怎么设置默认的margin和padding是无法去掉的
样式: 复制代码代码如下: <style type=”text/css”> body { font-family: tahoma; font-size: 12px; } input[type=checkbox...input id=”Checkbox1″ type=”checkbox” />”Checkbox1″>文本内容</label>
CBtnSt类做VC尤其是界面MFC开发的都用过吧,但其中的CheckBox虽然可以设置透明及对齐方式(仅是图标的排列方式),但是在大量CK按钮的情况下美观是个问题,但它又没有像正常的情况下的对齐方式使用方便
NULL 博文链接:https://yxwang0615.iteye.com/blog/1851539
表单元素input、文字完美垂直居中对齐方法.
制作的样式中要求table表头固定,内容滚动,同时checkbox右对齐,支持全选
在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先,搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在
1、ListView item中加入checkbox后onListItemClick 事件无法触发。 原因:checkbox的优先级高于ListItem于是屏蔽了ListItem的单击事件。 解决方案:设置checkbox的android:focusable="false" 2、选择其中的...
一个WinForm的TreeView,某node的CheckBox初始状态为false,当双击这个node的checkbox时,会出现很奇怪的情况: 第一次双击checkbox,checkbox显示的状态会切换两次状态,unchecked-> checked-> unchecked,而...
WPF利用字体图标,制作自定义CheckBox,已达到使自己的CheckBox更加的美观
JS控制checkboxJS控制checkbox
ListView和CheckBox结合_以及CheckBox设置点击事件的效率问题 其中实现的功能是: ...2.CheckBox的条目被选中后,下拉时其它条目也有被选中问题 3.当条目多于1000个后,CheckBox条目设置监听事件的优化
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
完美解决了ListView和CheckBox的焦点冲突及CheckBox的复用问题,讲解了CheckBox的全选、反选、删除功能及在下拉刷新和下拉加载中如何保存CheckBox的先前的选中状态
//解决的问题是Tree控件的checkbox不能设置为不允许用户勾选 //设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是可以勾选的,用来在数据中设置勾选了哪些节点 /...
checkBox分别处理选中与不选中checkBox分别处理选中与不选中
jquery checkbox 选中 取消 checkbox多选
带checkbox的树 checkbox tree tree tree checkbox