[记录]关于vertical-align单/多选框与说明文字对齐效果

效果图:

  

第一张使用label标签,第二张没有使用..

使用label标签,middle对齐方式的单选框下降了1px

而没有使用label标签,sub对齐方式的 却 居 中 了 =_=

不太理解,困.. 留一记录, 忘能解惑



代码:

1.说明名字用<label>标签

input,label
{
    vertical-align:middle;
}
</style>
</head>
<body>
<input type="checkbox" /><label>test测试</label>
<input type="radio" /><label>test测试</label>
<div>

2.说明文字没有使用<label>标签

input,label
{
    vertical-align:sub;
}
</style>
</head>
<body>
<input type="checkbox" />test测试
<input type="radio" />test测试
<div>
时间: 2024-12-16 23:31:16

[记录]关于vertical-align单/多选框与说明文字对齐效果的相关文章

ExtJS4.2 Grid知识点五:多选行(可以点击行选中记录与只能点击多选框选中记录)

本节主要学习ExtJS4.2 Grid多选行知识,示例图片: 在线演示  /  示例代码 主要内容如下: 可以点击行选中记录与只能点击多选框选中记录 选中Grid中数据加载到Form 获取Grid中多行数据,生成JSON格式 1.可以点击行来选中记录,此时多选Grid只需要配置selType: 'checkboxmodel',此时有一个缺陷,当你通过多选框勾选多条记录时,如果不小心点击某行,则当前点击行被选中,其它选中的记录行都被取消选择了. 2.只能点击多选框选中记录,此时多选Grid需要配置

工作需求----表单多选框checkbox交互

关于多选框,反选及选取几个: 1.html内容 <!--begin checkbox--> <div class="c_n_manage_tablexx"> <input type="checkbox" class="c_n_manage_checkbox c_n_manage_check" /> 全选(已选择<span class="a_n_manage_num">0</

表单复选框input[type=&quot;checkbox&quot;]

<!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http

ElementUi 表格取消全选框,用文字表示

Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading" tooltip-effect="dark" :header-cell-class-name="cellClass" height="350" ref="changeTable" @select="shipTab

8个非常个性化的CSS3单/复选框

单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery的,你可以挑选喜欢的单选框和复选框应用到自己的网页中去,非常方便. 1.jQuery超级个性化的单线框和复选框 今天要分享的也是一个非常个性化的单选框和复选框插件,颜色你可以自己定义. 在线演示 源码下载 2.CSS3漂亮的自定义Checkbox复选框 9款迷人样式 今天我们来分享一款9款样式迷人的

AngularJS(六):表单-复选框

本文也同步发表在我的公众号"我的天空" 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾选状态,以及通过其勾选状态来设置被绑定的属性值为true或false.我们来看以下示例: <body ng-app="myApp" ng-controller="person">     <form ng-submit="

EXCEL 从网页复制的内容 单/多选框 在EXCEL删不掉 及 2007添加开发工具选项卡

从网页复制到Excel中的单选.多选框等,有时候删除时怎么都删不掉,很是恶心.这时候需要使用“开发工具”来删除.它是设计模式下的一种组件或者说控件. Excel 2007 的可以用下图方式按delete键删除.2010的在文件----自定义----自定义功能区中选择. 2010的

android完成注册页面的下拉框及单复选框(1)

package com.example.dell.mylogin; import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.Button;import android.widget.Che

iOS 复选框风格转换 Switchery 开关效果

Switchery 是个简单的 JavaScript 组件,只要几个简单的步骤就可以帮助用户把默认的 HTML 复选框转换成漂亮 iOS 7 样式风格.用户可以很方便的自定义这种转换,所以可以很好的配合你的设计风格. 支持的现代浏览器:Chrome, Firefox, Opera, Safari, IE8+. http://www.oschina.net/p/switchery http://abpetkov.github.io/switchery/