复选框和文字对齐解决方案

最新推荐文章于 2021-08-06 14:05:43 发布
最新推荐文章于 2021-08-06 14:05:43 发布
阅读量391 收藏
点赞数
原文链接：http://www.cnblogs.com/myspecialzone/p/5888132.html
版权

<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>

<style type="text/css">
.zxx_exp{display:block; color:#34538b; margin-top:5px; margin-left:4px;}
.input_align_1{vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;}
.input_align_2{height:13px; vertical-align:text-top; margin-top:0;}
.input_align_3{height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;}
.input_align_4{height:14px; vertical-align:top;}
.input_align_5{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}
</style>
<body>
<div class="zxx_test_list">
<input type="radio" />单选框 &nbsp;&nbsp;<input type="checkbox" />复选框
<span class="zxx_exp">当文字14px左右大小时，对齐良好</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input type="radio" />单选框 &nbsp;&nbsp;<input type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，文字的位置就偏下了，火狐浏览器和谷歌浏览器下尤为明显</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_1" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_1" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;样式后的表现</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_2" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_2" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:13px; vertical-align:text-top; margin-top:0;样式后的表现</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_3" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_3" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;样式后的表现</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_4" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_4" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:14px; vertical-align:top;样式后的表现，chrome谷歌浏览器下文字稍微偏上</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_5" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_5" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置vertical-align:middle; margin-top:-2px; margin-bottom:1px;样式后的表现</span>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/myspecialzone/p/5888132.html

weixin_34050427
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI - 完美解决多个 el-checkbox 复选框内容折行不对齐的问题，复选框文字个数有多有少，导致每行不能均匀分布、最后断行时显得没对齐（完美解决方案，限制每行展示的个数，保可用）
高级前端工程师
06-08 4535
vue element el-checkbox 复选框太多导致每行对不齐怎么办，vue el-checkbox-group 怎么让el-checkbox 复选框每个宽度固定，vue el-checkbox 复选框如何让每个项宽度一样且多行对齐，多个el-checkbox复选框内容不对齐怎么办，多个el-checkbox如何限制一行只放n个，el-checkbox 多个复选框每行不对齐，解决多个el-checkbox内容折行对不齐问题，el-checkbox-group折行对不齐的问题，element复选框多
Qt QCheckBox复选框文字水平垂直居中对齐的解决方法
有问题或资源连接有缺失的可以私信公众号新潮看世界获取
01-25 5827
QCheckBox的文字居中在ui设计器的属性面板中是没有的，所以只能在stylesheet属性中直接设置样式： QCheckBox#checkBox{\n    padding-left:25px;\n} 记得修改checkBox为你自己的控件名称，居中效果自己调调哦! 更多细节，自己看书哦： 《Qt5开发及实例》.(陆文周).[PDF].pdf: ...
checkbox文字和选择框对齐的CSS样式
boolean2011的专栏
01-17 2727
复选框与文字对齐的问题是一个大家经常碰到的问题,一般默认情况下checkbox的选择框和文字是不对齐的,造成页面表单看起来很混乱。因此需要设置对应的css样式来调整文字和选择框的位置，使得他们能够对齐。 具体的css样式如下： [CSS在线]-示例代码.checkbox{vertical-align:middle; margin-top:0;} 下面是使用了css样式和默认的checkbox
复选框与文字对齐方法
Mjxiaomihu的博客
09-07 1380
1、先写出复选框 <div class="clearfix clearfix-text"> <div class="pull-left"> <label for="" class="checkbox" > <input type="checkbox">自动登录 </label> </div>
复选框文字对齐显示
热门推荐
dxsdk
03-25 1万+
最近的工作中，有很多表单的制作，很多次都碰到复选框与文字对齐的问题，发现在不同的浏览器中，显示各异，显示效果如下    观察发现，IE6、IE7 显示效果基本相同，算是显示比较正常的效果，IE8、safari 和火狐显示效果基本相同，两个文字都偏下，而opera稍偏下。在之前我的解决方法，都是通过文字外面套上另外的标签，等，通过调整input标签和label的html标签来对齐，大
复（单）选框与文字对齐问题
weixin_33950035的博客
10-16 468
一般情况下， 文字大小为14px;则在浏览器中对齐良好； 若文字大小为12px;则出现文字与复选框或者单选框不对齐现象： 　　不在同一条线上 解决办法： 1）、在单选框或者复选框上设置：vertical-align: text-bottom;margin-bottom: 2px;*margin-bottom: -2px; 2）、在单选或者复选框元素上设置：vertical-align:m...
复选框与文字水平对齐方法
yw1688的专栏
07-05 823
input { vertical-align:middle; margin-bottom:2px; *margin-bottom:-2px; }
关于单复选框与文字对齐的小总结
laoya814的专栏
11-09 559
      最近网站改版，多次碰到了单选框和复选框与文字对不齐的问题，颇为纠结。遂网上胡乱百度一起，很多热心人提出了各种各样的解决方案。于是乎一顿狂喜的搬进来，可是效果却不见想象中的好，究其原因，发现一些考虑不是很全面，可能是清零代码各不一样所致。没办法，自己开始双眼通红的开始熬。最终还是让我总结出来几个狗血的办法，大家别见笑。      PS，英文和14号字的中文对齐是良好的，不需要另外加样式。但可怜我们的网站是以12号中文为王。      第一：不管他      呵呵，千万别喷饭，这么做的可不止一家网站
html复选框和文字水平对其,解决checkbox与对应文字不对齐的问题
weixin_40000430的博客
06-09 1556
最近公持环开行打进对端架处参触架码我通会法时果司比较忙，所以一直在赶项目，很久没有更新博直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如客了。刚才在工调代求学功解宗维如请框总行断随以移泉动实作中又遇到了一个问题，下面我来分享一下吧(｡･∀微和二第说，班。都年很过过事发工开宗定据发指互数个遍前互就业大经･)ﾉﾞ问题所在我写了一个用记意口端样理框农必素些区大是应可近浏得input，他的类型是ch...
复选框单选框与文字对齐问题的研究与解决
郭晓湉
11-18 2323
原文地址：http://www.zhangxinxu.com/wordpress/?p=56前言目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截
表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐）
09-25
在网页设计中，表单是用户与网站交互的重要部分，其中元素如`input`输入框、`checkbox`复选框等通常需要与相应的提示文字保持对齐，以提供清晰、一致的用户体验。然而，由于浏览器默认样式的影响，这些元素与文字的...
小tips：单复选框与文字对齐问题的研究
flying meng的菜鸟居
08-06 2239
以前来说，单复选框与后跟文字的对其问题其实大多出现在 `font-size` 为 `12px` 的场景下。在现在默认和常用的 `14px`下其实应该是不会出现的。 随着浏览器的不断发展，对css的支持程度以及不同的实现方式，我们大概要时刻注意相关问题的产生...
复选框与文字对齐问题的解决方法
我们仨
08-13 2368
在做图书商城的登录页面时遇到一个问题，复选框与文字对不齐，效果图如下所示： 部分代码如下所示： <input type="checkbox" name="checkbox" value="checkbox" /> <font>记住用户</font>&nbsp;&nbsp; <input type="checkbox" name="...
css-使复选框与后面的文字水平对齐
路漫漫其修远兮
01-18 3646
所有的元素都有个默认的基线，且默认基线对齐是底对齐 复选框与其后面的文字在同一个父容器内，默认对齐的基线为父容器的底部，所以造成了复选框与文字不对齐。 vertical-align这个属性控制以什么为基线。 可以通过给复选框与复选框后面的文字都设置vertical-align: middle;实现都以父容器的中间部位为基线对齐，达到对齐的目的。...
checkbox 文字与多选框的对齐问题
30岁见闻、心得
12-17 1948
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dip"> <CheckBox android:id="@+id/login_cb_sav
html中加一个框与底部平齐,div+CSS实现单选复选框与文本对齐
weixin_30825389的博客
05-30 368
在进行div+css布局的过程中，很多同学发现表单单选框与复选框不能跟文本对齐，下面青岛星网跟大家分享：div+CSS实现单选复选框与文本对齐的方法。HTML范例代码单选框line-height:18px;复选框line-height:18px;单选框line-height:20px;复选框line-height:20px;单选框line-height:30px;复选框line-height:30...
单选和多选框与文字对齐方法总结
weixin_30505751的博客
12-04 440
点击看效果demo 对于单选和多选框一般都会用相应的文字进行搭配使用，干活不累。但是最原始没有任何样式的单选和复选和文字在一起搭配起来并不美观，会因为字体大小存在上下参差。平时经常踩这个坑，一般设置单选和复选的vertical-align，外加margin辅助达到效果。现在看了大牛的博客，把他总结的方法予以学习。单复选框与文字默认以vertical-align:baseline的方式对齐的。对于...
如何让复选框和按钮文字对齐且让复选框位置在前
最新发布
06-09
可以通过以下方式实现复选框和按钮文字对齐，并让复选框位置在前： HTML代码： ``` <span class="checkmark"></span> 选项1 按钮 ``` CSS代码： ``` .checkbox-label { display: flex; align-items: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值