css设置checkbox和文字在同一水平线上

最新推荐文章于 2024-01-09 16:22:58 发布
最新推荐文章于 2024-01-09 16:22:58 发布
阅读量7.2k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq176243970/article/details/89228836
版权

默认是不在同一水平线上

需要在input上添加样式: vertical-align:middle;

<input type="checkbox" style="vertical-align:middle;">文字
码农张3
关注
HTML5+CSS3 非常全的笔记
LeHan的博客
05-13 768
文章目录HTML5vsco的使用常用标签图像标签超链接标签锚点链接特殊字符表格标签列表标签表单标签实战（注册页面）CSS3书写规范css选择器基础选择器标签选择器类选择器id选择器通配符选择器复合选择器后代选择器(很重要)子选择器（重要）并集选择器（重要）伪类选择器链接伪类选择器focusw伪类选择器CSS字体属性字体系列字体样式字体大小字体粗细复合形式文本属性文本颜色对其文本装饰文本文本缩进行间距CSS引入方式内部样式表（嵌入式）内联样式表（行内式）外部样式表案例新闻页面CCS的元素显示模式行内块元素显示
复选框(checkbox)和单选框(radio)与文字居中对齐
wangdyy921的专栏
01-27 1万+
最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的 提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依 然不能完美对齐。如下图所示：于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：
多级垂直水平Checkbox选择
06-01
jQuery多级下拉垂直水平Checkbox联动选择
checkbox和文字不再同一水平线上
weixin_34417814的博客
06-01 2849
为了演示效果，我故意将文字变为12px，将复选框变大，看到的效果就是下面的那样 然后，我们通过给复选框添加vertical-align：middle；让文字和复选框达到同一水平线的效果 转载于:https://www.cnblogs.com/xiaqilin/p/6929661.html...
css复选框和文字对齐
liuyuemozhu的博客
07-08 2422
解决css复选框和文字不对齐的方法： https://www.cnblogs.com/anymoredo/p/4980009.html input[type=checkbox]{ 　　display: inline-block; 　　vertical-align: middle; 　　margin-bottom: 2px; } ...
css如何让两个元素在同一水平线上(文字和svg图片)
m0_71835253的博客
01-09 1651
结果 : 两个都设置 vertical-align : middle 就可以了。2：margin会把div撑破，达不到预期效果（padding也是）3. 加了flex布局 之后, 因为我这个是在表格里面,无法居中了。起初用margin-top margin-bottom来协调。一开始写发现这两者不在同一水平线。
CheckBox与文字的间距
llixiangjian的博客
10-25 1万+
昨天第一次这么用CheckBox与文字设置间距的，以前都还没用过，所以也在网上找了许多， 其中1、2、点为网上找的，但仍不能满足我的需求，所以添加了缩放，正好满足我开发需求， 而且还算挺不错的。遇再挑剔的也都没怕了！现在汇集起来希望能给你们用上！ 1)checkbox在更换了图片后， 与文字的距离有问题， 建议修改background为@null， 去除占据的位置。 2) checkb
同一个label中，checkbox和文字标注竖直方向没有对齐
最新发布
03-19
当在同一 `label` 中放置了复选框 (`checkbox`) 和文字时，可能会因为默认样式、字体大小或其他因素导致它们在竖直方向上不对齐。下面是一些解决此问题的常见方法： --- ### 方法一：调整 vertical-align 属性 ...
<el-checkbox v-model="item.checked">{{ item.name }}</el-checkbox> 文字和复选框无法对齐
10-19
在 Vue 中，`<el-checkbox>` 组件默认会包含一个内联标签，如果文字内容很长，它...通过这个 CSS 规则，你可以确保文本和复选框始终保持在同一水平线上。记得根据实际需求调整 `align-items` 和 `margin-bottom` 的值。
HTML和CSS——中国大学mooc上web开发笔记
new_start_2018的博客
02-04 1303
文章目录HTML一、基本语法结构及标签 HTML 一、基本语法结构及标签 类似于脚本的开始标签!DOCTYPE html；整个文件结构在html标签内，html又分为head标签和body标签部分； head标签内： title标签，网页显示时的标签； meta标签，设定元属性，主要charset=“UTF-8”； link标签文件外引入css文件，主要有ref、href和type三个属性要设...
checkbox 设定文字和选框之间的距离及自定义样式
04-19
NULL 博文链接：https://yxwang0615.iteye.com/blog/1851539
label文字 与input 不在一条直线上解决方案
Fly的博客
05-22 9319
label文字 与input 不在一条直线上解决方案1.html&lt;div&gt; &lt;input class="form-input" type="checkbox" /&gt; &lt;label&gt;全选&lt;/label&gt; &lt;/div&gt;2.css.form-input { float: left; }效果：...
css-input与文字的对齐
热门推荐
草泥马
09-07 3万+
前言 目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截图： 雅虎中国首页单选框复选框与文字不对齐 这里，不是说，雅
复（单）选框与文字对齐问题
weixin_33950035的博客
10-16 540
一般情况下， 文字大小为14px;则在浏览器中对齐良好； 若文字大小为12px;则出现文字与复选框或者单选框不对齐现象： 　　不在同一条线上 解决办法： 1）、在单选框或者复选框上设置：vertical-align: text-bottom;margin-bottom: 2px;*margin-bottom: -2px; 2）、在单选或者复选框元素上设置：vertical-align:m...
复选框单选框与文字对齐问题
u013371992的专栏
01-03 546
做页面的过程中遇到过复选框单选框与文字对齐问题，看到这篇文章写得不错，很详细的解说。 前言 目前中文网站上面的文字，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截图： 雅虎中国
让lebel和radio/checkbox水平对齐
linminqin的专栏
06-10 2795
label, input { vertical-align: middle; }
复选框与文字对齐问题的解决方法
我们仨
08-13 2520
在做图书商城的登录页面时遇到一个问题，复选框与文字对不齐，效果图如下所示： 部分代码如下所示： <input type="checkbox" name="checkbox" value="checkbox" /> <font>记住用户</font>&nbsp;&nbsp; <input type="checkbox" name="...
关于单复选框与文字对齐的小总结
laoya814的专栏
11-09 616
      最近网站改版，多次碰到了单选框和复选框与文字对不齐的问题，颇为纠结。遂网上胡乱百度一起，很多热心人提出了各种各样的解决方案。于是乎一顿狂喜的搬进来，可是效果却不见想象中的好，究其原因，发现一些考虑不是很全面，可能是清零代码各不一样所致。没办法，自己开始双眼通红的开始熬。最终还是让我总结出来几个狗血的办法，大家别见笑。      PS，英文和14号字的中文对齐是良好的，不需要另外加样式。但可怜我们的网站是以12号中文为王。      第一：不管他      呵呵，千万别喷饭，这么做的可不止一家网站
复选框单选框与文字对齐问题的研究与解决
qq1183387582_的博客
06-15 402
复选框单选框与文字对齐问题的研究与解决 一、前言 目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截图： 雅虎中国首页单选框复选框与文字不对齐 雅虎中国首页单选框复选框与文字不对齐 这里，不是说，雅虎中国的团队不够认真，而因为这12px大小文字与单选框和复选
微信开发者工具中写代码，怎么让checkbox和navigator在同一行
10-15
在微信开发者工具中编写代码时，如果你想要将`<checkbox>`和`<navigator>`标签放在同一行，你可以利用HTML的结构紧凑特性以及合适的CSS布局。这两个元素都是块级元素，所以直接紧挨着放置可能会导致换行。一种方法是在它们之间插入空格或者非换行字符，比如` ` 或者 `inline-block` 类型的元素： ```html <navigator url="#" inline="true"> </navigator>  <checkbox checked bindtap="yourFunction"></checkbox> ``` 在这个例子中，`<navigator>` 的 `inline="true"` 属性让它变为内联元素，而 ` ` 或者其他非换行字符则保持了两者的位置。如果需要更好的视觉效果，你还可以使用 CSS 清除默认间距： ```css .navigator, checkbox { display: inline-block; vertical-align: middle; } ``` 这会让两个元素在一行上并且水平对齐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值