`
yunzhu
  • 浏览: 1146455 次
  • 性别: Icon_minigender_1
  • 来自: 南京
博客专栏
B2b19957-cda7-3a9e-83a0-418743feb0ca
监控应用服务器
浏览量:110071
2e8be8be-e51f-346c-bcdd-12623c9aa820
Web前端开发
浏览量:119848
Bfa5df64-a623-34b9-85b8-ef3ce2aed758
经典异常的解决
浏览量:204723
社区版块
存档分类
最新评论

checkbox与说明文字无法对齐的问题

阅读更多

写过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文字对齐)

 

 

  • 大小: 9.9 KB
  • 大小: 5.5 KB
5
2
分享到:
评论
4 楼 niegood 2016-06-12  
谢了,历史难题解决了
3 楼 小林java 2013-06-27  
2 楼 njl_041x 2011-12-05  
<label for="Checkbox1"><input id="Checkbox1" type="checkbox" />北京</label>

劳教楼主帮我把这种结果的对齐一下。
我的邮箱:njl_041x@163.com
先谢过了!
1 楼 njl_041x 2011-12-05  
感觉还是有一个像素的差距。。。

相关推荐

    CheckBox(c++builder)

    在C++Builder中,CheckBox通常被用来让用户选择或取消选择某个选项,其状态通常显示为一个带有文字说明的小方框,未选中时为空白,选中时显示一个勾号。 在C++Builder中,CheckBox属于VCL(Visual Component ...

    解决table td中的checkbox无法上下居中的问题

    然而,在使用表格布局时,我们经常会遇到一些布局上的小问题,例如在表格的单元格(td)中插入复选框(checkbox)时,复选框无法上下居中的情况。这个问题看似简单,但在实际开发中,却可能对用户体验产生一定影响。...

    Jquery selectbox 支持多选

    selectedtext:”,//checkbox=true时有效,选择框文字,为空显示为选中项,非空时固定不变 requiredvalue:[],//必须选择的值,显示为不可点击状态,checkbox=true时有效, disabled:false,//是否禁用 selectclass:’...

    VB控件属性大全

    - **说明**:设置标签文字的颜色。 **Alignment** - **说明**:设置文本对齐方式。 - **取值**: - `0` 左对齐 - `1` 居中 - `2` 右对齐 **BackStyle** - **说明**:设置标签的背景样式。 - **取值**: - `0` ...

    基于react-window 库编写的一个超灵活的表格源码+项目说明.zip

    - 文字布局,支持设置,左对齐和居中对齐 - 支持表头行的样式自定义 - 支持表格行的样式自定义,使用函数渲染,返回参数:行索引。 - 表头列的顺序支持拖拽变更,支持开关该功能 - 支持行选中,行反选,全部选中,...

    android常用控件属性方法事件说明.doc

    `gravity`用来设置文本在控件内部的对齐方式,如左对齐、居中或右对齐;`phoneNumber`则使文本框只能接受电话号码格式的输入;`hint`用于设置文本框为空时的提示信息;`lines`定义了文本框默认的行数;`password`...

    C#应用程序开发-Windows常用控件.pptx

    2. `TextAlign`:文字对齐方式。 3. `Click`事件:当用户点击按钮时触发。 **组框控件(GroupBox)**和面板控件(Panel)是容器控件,用于组织和分组其他控件。 1. GroupBox:有标题但无滚动条,可以设置`Text`属性...

    DataGridView使用说明 (word)

    32. **文字对齐**:`DefaultCellStyle.Alignment` 控制单元格内文字的位置。 33. **单元格换行**:设置 `DefaultCellStyle.WrapMode` 为 `True` 允许单元格内文字换行。 34. **DBNull 值显示**:处理 `DBNull` 值...

    控件综合使用

    1. **Label控件**:用于显示文本,通常用来标识其他控件或提供说明性信息。在VS2005中,你可以改变其字体、颜色和对齐方式。 2. **TextBox控件**:允许用户输入和编辑文本。有多种模式,如单行、多行,还可以设置...

    《表格魔鬼教程--蓝色经典版》

    CSS(层叠样式表)可以用来改变表格的外观,如边框、背景色、文字对齐方式等。例如,使用`border-collapse`属性可以设置表格边框是否合并,`background-color`可以改变单元格或整个表格的背景颜色,`text-align`则...

    VB控件属性大全经典_控件_vb控件_属性_VB_

    1. **Caption**: 这个属性用于设置控件的可见文字,例如按钮上的文本或标签的说明文字。 2. **Text**: 多数与文本相关的控件(如TextBox)都包含此属性,用于设定或获取控件显示的文本内容。 3. **Width** 和 **...

    滤镜问题-FireFox火狐浏览器与IE的对比分析

    ### 滤镜问题-FireFox火狐浏览器与IE的对比分析 在Web开发领域,浏览器兼容性一直是开发者关注的重点之一。特别是在早期的Web技术发展中,不同浏览器对标准的支持程度存在较大差异,导致了多种特有的样式和效果实现...

    2021-2022计算机二级等级考试试题及答案No.18416.docx

    18. **Label控件**:`Alignment` 属性用于控制Label控件中文字的对齐方式。设置为 `1` 表示左对齐,`2` 表示居中对齐,`3` 表示右对齐。 ### 编程实践 19. **二维表**:在数据库中,二维表是由行和列组成的表格结构...

    CSS3单选复选开关按钮美化特效.zip

    - **说明.htm**和**说明.txt**:这两个文件提供了关于如何使用和实现这些特效的文字说明。 总的来说,CSS3单选复选开关按钮美化特效是一种利用CSS3特性增强网页表单元素视觉效果的技术,通过巧妙运用CSS3的多种功能...

    HTML相应知识点.docx

    3. Strong和B:两者都可以用来加粗文字,但Strong强调内容的重要性。 4. Em和I:Em表示斜体,通常用于表示强调;I仅仅是斜体样式。 5. HR:水平线标签,用于在内容中插入一条水平分隔线。 6. S:删除线标签,用于...

    Visual Basic 6.0 控件参考指南

    控件是构建用户界面的基础元素,它们提供了与用户交互的方式。在VB6中,有许多内置的控件,如按钮(Button)、文本框(TextBox)、标签(Label)、列表框(ListBox)、复选框(CheckBox)、单选按钮(RadioButton)等。每种控件...

    Delphi7控件属性

    - `RadioButton`组件:`Checked`属性表示是否被选中,`Alignment`用于设置文字和选择框的对齐方式。 - `CheckBox`组件:`AllowGrayed`属性决定是否允许变灰状态,`State`属性设置复选框的状态。 2. **文本类组件*...

    Visual Basic控件编程百例通,关于控件的教程

    1. **控件的添加与布局**:讲解如何在设计界面时添加和排列控件,理解控件的属性如位置(Top, Left)、大小(Width, Height)以及对齐方式。 2. **控件的属性设置**:每个控件都有其特定的属性,例如Button控件的...

    网页设计单词.pdf

    --&gt;`是HTML注释,用于添加不被浏览器执行的说明性文字。 2. 图像与链接类标签: `&lt;a&gt;`标签创建超链接,`href`属性指定链接的目标地址,`target`属性定义链接在何处打开,如`_blank`表示新窗口,`_self`表示在当前...

    android_UI设计知识总结

    以下是对Android UI设计中几个核心知识点的详细说明: 1. **Button**:按钮是用户交互的基础,可以触发特定的事件。在Java代码中,可以通过findViewById()方法获取到Button实例,并通过setBackgroundColor(), ...

Global site tag (gtag.js) - Google Analytics