div中label和input整齐排列

关于label和input对齐的那些事

input文本和label对齐默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input type="text"> </div> 但是经常设计图中有label的行高,或者input的高度设计,默认状态下,依然是居中的.但是很多时候label和input要浮动,一旦浮动,后面的input标签就紧紧的贴住了label标签,也就造成了视觉上看到并没有居中. 比如下面

angular中label包含input点击事件的问题

问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName //INPUT, 点击img时,$event.target.tagName // IMG , INPUT,打印两次点击label内空白处, $event.target.tagName // LABEL, INPUT,打印两次 ng-click的事件会运行多次,点击label时,先label再input再label,

React中，input外边如果包一个div，可以把input的onChange事件绑定到div上面，并且也生效

最近第一次开始学习封装组件,遇到几个比较神奇的问题. 首先就是如果input外边包一个div,如果把input的onChange事件绑定到div上,也会生效 <div onChange={(e)=>{console.log(e.target.value)}}> <Input/> </div> 还有,如果封装了一个组件,那么里面的最外层元素的{...this.props}需要慎用,虽然这样子做,可以把样式传过来,并且生效,但是会报错

IE8下div中2个button仅仅显示一个

IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" > <select name="adviceTypeOne" id="adviceTypeOne" class="shortselect" > <option value="-1">--请选择--<

实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.

JS动态添加div，然后在div中添加元素

需求: 组织部中有个这样的需求,根据年份动态显示该年份下的定性指标! 我的做法: 先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. 代码: 空的div,存放定性指标 <div id="DvelopmentTarget"> </div> <div id="DvelopmentTarget"> </div> 动态往div中添加元素: for (var n = 0; n < data.len

动态给div中新增html

小颖最近接触的项目中用到了 innerHTML 所以小颖今天就自己做了个demo,当当当当代码请看下方: 页面效果:

label与input间距的小问题

先码后文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

CSS深入之label与input对齐!

我想很多人都会碰到label与input 对齐的问题. 这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼. 参考各大门户网站的前端源码. 得一方法,以记录之: html确实很简单: 帐号输入用户帐号. 密码输入用户密码. CSS如下: label{ display: inline-block; padding: 0 10px; vertical-align: middle; } input{ outline: none; border: 1px solid rgb(216, 216

关于label和input对齐的那些是秦

input文本和label对齐默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input type="text"> </div> 但是经常设计图中有label的行高,或者input的高度设计,默认状态下,依然是居中的.但是很多时候label和input要浮动,一旦浮动,后面的input标签就紧紧的贴住了label标签,也就造成了视觉上看到并没有居中. 比如下面

div 中图片溢出问题及 CSS3中图片翻转问题

如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默认是图片的宽高. 但是如果是多张图片要放进一个div 这样虽然也可以,但是会影响后边整体的布局,比如图片外间距的设置,还有需要隐藏图片时就不好处理了. 经过尝试发现,如果设置给div 的宽度太小不足以容纳所有图片,则图片会默认竖直排列,这时就发生溢出了,可以用 overflow: hidden; 样

说说HTML5中label标签的可访问性问题——张鑫旭

一.开篇叨叨一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 我们看看点评网的注册页面那个同意条款的复选框,非要点在复选框上才能选中: 查看HTML发现复选框id和label标签的for属性值都是空,不解~~ 像其他网站的登录或是注册处的控件的点击区域就做得蛮不错的,像是豆瓣网, 新浪微博等: 我们一般有两种方法来优雅地扩

浏览器后退->清除原页面div中填写的数据

需求说明:页面表单用前端用div布局,提交之后跳转到另一个页面,但是考虑到客户奇怪的脑回路,可能会点击浏览器的后退按钮,不知道是个体情况还是都是一样,原本div中填写的数据还依然存在,所以需要让页面在后退后div显示为空. 解决过程:找了两个前端的,说没碰到过这种情况,无奈只能自己解决.我定义了一个方法,在点击提交之后,会立即清除div中的数据,但是这样,用jQuery提交的数据也变成了空.后来我采用setTimeout延时清除div中的数据.此方法为拍脑门想出来的,会受网速等其他因素影响,不好

怎样推断DIV中的内容为空

怎样推断DIV中的内容为空 1.问题背景推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

div中出现滚动条，自动保持在最底端---显示聊天窗口最新的信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>张铭达的聊天室</title> </head> <body> <div id="contents" style="height:500px;overflow:auto; border:green solid 2px">&l

div+css:div中图片垂直居中

div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box { width: 200px; height:200px; display: table-cell; /* 水平居中 */ text-align:center; /* 垂直居中 */ vertical-align:mid

css div中内容绝对居中（多行内容）

div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title>绝对居中 </title> <style type="text/css"> h1, h2, h3, h4, h5 { margin:0px; padding:0px; } .panel { width:300px; height:150px; background

为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？

为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样两个div高度相同,第二个我写了一个1当作有内容吧,它就下沉了... 奇怪... 为什么有内容的就比没有内容的矮呢? 如果都有内容就一样高,求大神解释下最外层的div声明了text-align:center:属性...为了让里面的inline-block的div们可以居中... 最佳答案 1.框内有文字和没文字的区别,高度伸展的方向是不一样的.当有文字的时候,高度是向下扩展的

根据标记清空页面中所有的input对象

function clear1(flag) { //获取页面中所有的input对象 var inputs = document.getElementsByTagName("input"); for(var i = 0; i<inputs.length; i++){ //获取一个input对象 var input = inputs[i]; if(input.type == "text"){//如果是文本输入框的input对象 if(getTableId(inpu

div中的内容水平垂直居中

1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上padding元素,内容四周便会留下空白,实现水平垂直居中的效果 css代码如下: .demo{ width: 200px; border: 1px solid red; padding: 20px; } HTML代码如下: <div class="demo"> this is

div中label和input整齐排列

热门专题