写过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文字对齐)
相关推荐
在C++Builder中,CheckBox通常被用来让用户选择或取消选择某个选项,其状态通常显示为一个带有文字说明的小方框,未选中时为空白,选中时显示一个勾号。 在C++Builder中,CheckBox属于VCL(Visual Component ...
然而,在使用表格布局时,我们经常会遇到一些布局上的小问题,例如在表格的单元格(td)中插入复选框(checkbox)时,复选框无法上下居中的情况。这个问题看似简单,但在实际开发中,却可能对用户体验产生一定影响。...
selectedtext:”,//checkbox=true时有效,选择框文字,为空显示为选中项,非空时固定不变 requiredvalue:[],//必须选择的值,显示为不可点击状态,checkbox=true时有效, disabled:false,//是否禁用 selectclass:’...
- **说明**:设置标签文字的颜色。 **Alignment** - **说明**:设置文本对齐方式。 - **取值**: - `0` 左对齐 - `1` 居中 - `2` 右对齐 **BackStyle** - **说明**:设置标签的背景样式。 - **取值**: - `0` ...
- 文字布局,支持设置,左对齐和居中对齐 - 支持表头行的样式自定义 - 支持表格行的样式自定义,使用函数渲染,返回参数:行索引。 - 表头列的顺序支持拖拽变更,支持开关该功能 - 支持行选中,行反选,全部选中,...
`gravity`用来设置文本在控件内部的对齐方式,如左对齐、居中或右对齐;`phoneNumber`则使文本框只能接受电话号码格式的输入;`hint`用于设置文本框为空时的提示信息;`lines`定义了文本框默认的行数;`password`...
2. `TextAlign`:文字对齐方式。 3. `Click`事件:当用户点击按钮时触发。 **组框控件(GroupBox)**和面板控件(Panel)是容器控件,用于组织和分组其他控件。 1. GroupBox:有标题但无滚动条,可以设置`Text`属性...
32. **文字对齐**:`DefaultCellStyle.Alignment` 控制单元格内文字的位置。 33. **单元格换行**:设置 `DefaultCellStyle.WrapMode` 为 `True` 允许单元格内文字换行。 34. **DBNull 值显示**:处理 `DBNull` 值...
1. **Label控件**:用于显示文本,通常用来标识其他控件或提供说明性信息。在VS2005中,你可以改变其字体、颜色和对齐方式。 2. **TextBox控件**:允许用户输入和编辑文本。有多种模式,如单行、多行,还可以设置...
CSS(层叠样式表)可以用来改变表格的外观,如边框、背景色、文字对齐方式等。例如,使用`border-collapse`属性可以设置表格边框是否合并,`background-color`可以改变单元格或整个表格的背景颜色,`text-align`则...
1. **Caption**: 这个属性用于设置控件的可见文字,例如按钮上的文本或标签的说明文字。 2. **Text**: 多数与文本相关的控件(如TextBox)都包含此属性,用于设定或获取控件显示的文本内容。 3. **Width** 和 **...
### 滤镜问题-FireFox火狐浏览器与IE的对比分析 在Web开发领域,浏览器兼容性一直是开发者关注的重点之一。特别是在早期的Web技术发展中,不同浏览器对标准的支持程度存在较大差异,导致了多种特有的样式和效果实现...
18. **Label控件**:`Alignment` 属性用于控制Label控件中文字的对齐方式。设置为 `1` 表示左对齐,`2` 表示居中对齐,`3` 表示右对齐。 ### 编程实践 19. **二维表**:在数据库中,二维表是由行和列组成的表格结构...
- **说明.htm**和**说明.txt**:这两个文件提供了关于如何使用和实现这些特效的文字说明。 总的来说,CSS3单选复选开关按钮美化特效是一种利用CSS3特性增强网页表单元素视觉效果的技术,通过巧妙运用CSS3的多种功能...
3. Strong和B:两者都可以用来加粗文字,但Strong强调内容的重要性。 4. Em和I:Em表示斜体,通常用于表示强调;I仅仅是斜体样式。 5. HR:水平线标签,用于在内容中插入一条水平分隔线。 6. S:删除线标签,用于...
控件是构建用户界面的基础元素,它们提供了与用户交互的方式。在VB6中,有许多内置的控件,如按钮(Button)、文本框(TextBox)、标签(Label)、列表框(ListBox)、复选框(CheckBox)、单选按钮(RadioButton)等。每种控件...
- `RadioButton`组件:`Checked`属性表示是否被选中,`Alignment`用于设置文字和选择框的对齐方式。 - `CheckBox`组件:`AllowGrayed`属性决定是否允许变灰状态,`State`属性设置复选框的状态。 2. **文本类组件*...
1. **控件的添加与布局**:讲解如何在设计界面时添加和排列控件,理解控件的属性如位置(Top, Left)、大小(Width, Height)以及对齐方式。 2. **控件的属性设置**:每个控件都有其特定的属性,例如Button控件的...
-->`是HTML注释,用于添加不被浏览器执行的说明性文字。 2. 图像与链接类标签: `<a>`标签创建超链接,`href`属性指定链接的目标地址,`target`属性定义链接在何处打开,如`_blank`表示新窗口,`_self`表示在当前...
以下是对Android UI设计中几个核心知识点的详细说明: 1. **Button**:按钮是用户交互的基础,可以触发特定的事件。在Java代码中,可以通过findViewById()方法获取到Button实例,并通过setBackgroundColor(), ...