.form-group {
margin-bottom: 15px;
position: relative;
}
.control-label{
float: left;
width: 15%;
text-align: right;
padding-right: 20px;
padding-top: 7px;
}
.form-control{
float: left;
width: 50%;
}
.form-control input{
display: block;
width: 100%;
height: 34px;
padding: 0 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
outline: none;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;

}
.s-r{
height: 34px;
line-height: 34px;
position: absolute;
top: 25px;
right: 0;
z-index: 2;
display: block;

}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;
}

<div class="form-group clearfix">
<label for="inputPassword3" class="control-label">Password</label>
<div class="form-control">
<input type="text" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group clearfix">
<label for="inputPassword2" class="control-label">Password</label>
<div class="form-control">
<input type="text" id="inputPassword2" placeholder="Password">
</div>
</div>
<div class="form-group clearfix">
<label for="inputPassword1" class="control-label">Password</label>
<div class="form-control">
<input type="text" id="inputPassword1" placeholder="Password">
</div>
<span class="s-r">元</span>
</div>
<label>
<input type="checkbox" />
记住用户名
</label>

label--input的更多相关文章

  1. $("label + input") 匹配所有紧接在 prev 元素后的 next 元素

    描述: 匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name= ...

  2. label+input实现开关切换效果

    Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px ...

  3. jQuery改变label/input的值,改变class,改变img的src

    jQuery改变label/input的值.改变class,改变img的src jQuery改变label的值: $('#aID').text("New Value"); jQue ...

  4. html5 填表 表单 form label input button legend fieldset

      <form>本身没有什么意义, 但是某些依赖form的标签元素一旦没有了form就不能生效. 所以form是提供一个定义环境给form的插件元素去生效的. 1.method 属性pos ...

  5. label+input实现按钮开关切换效果

    label+input实现按钮开关切换效果 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. 纯 CSS 利用 label + input 实现选项卡

    clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...

  7. label和input里面文字不对齐的解决方法!

    测试了集中方法,发现不行.只能用专署标签解决这个问题. <fieldset>    <legend>神光咨询后台管理登录</legend>    <br /& ...

  8. label、input、table标签

    <label>标签 <form> <label for="male">Male</label> <input type=&qu ...

  9. HTML label标签的for属性--input标签的accesskey属性

    本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定,当我们点击input前面的文本标识会自 ...

  10. label与input间距的小问题

    先码后文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

随机推荐

  1. The request associated with the AsyncContext has already completed processing

    Some time ago there was a problem with the servlet3.0, is in servlet in asynchronous processing data ...

  2. iOS - 国际化语言切换

    iOS国际化:如何切换语言   1.国际化就是将标签.提示信息等信息放到资源文件中,随着程序需要的语言提供对应的资源文件.以key/value对存储,每个资源的key值不变,value随着需求改变. ...

  3. geotrellis使用(三十二)大量GeoTiff文件实时发布TMS服务

    前言 在上一篇文章中我讲了如何直接将Geotiff文件发布为TMS服务,在其中只讲了单幅Geotiff的操作,其实单幅这种量级的数据对Geotrellis来说就是杀鸡焉用牛刀,Geotrellis针对 ...

  4. hiredis安装及测试

      (1) redis环境搭建    (2) hiredis下载地址及C API  github   (3) hiredis安装 我是把libhiredis.so放到/usr/local/lib/中, ...

  5. css 多行文字,超出部分隐藏,...代替

    css虽然简单,但其实也是记得常用的那些,不常用的还是要搜一搜再写

  6. Python面向对象之属性

    属性的定义和调用 1,定义时,在普通方法的基础上添加@property装饰器 2,定义时,属性仅有一个self参数 3,调用时,无需括号 vim day7-8.py #!/usr/bin/python ...

  7. Docker 学习应用篇之二: Docker的介绍和安装

    之前说过Docker的好处,Docker可以集装箱化的部署应用程序.那么Docker是通过什么实现的呢.要理解Docker内部构建,需要先理解Docker的四种部件 1)images:镜像,docke ...

  8. nowcoder2018年全国多校算法寒假训练营练习比赛(第一场)

    [气死我了 写完了博客发布 点看来一看怎么只剩下一半不到的内容了!!!!!!!!!!] [就把卡的那两道放上来好了 其余的不弄了 生气!!!!!] 可以说是很久没有打比赛了 今天这一场主要是  基础算 ...

  9. Why should we typedef a struct so often in C? - Stack Overflow

    https://stackoverflow.com/questions/252780/why-should-we-typedef-a-struct-so-often-in-c As Greg Hewg ...

  10. Java applets A Java applet example

    https://en.wikipedia.org/wiki/Ajax_(programming) https://zh.wikipedia.org/wiki/AJAX Ajax (also AJAX; ...