.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. 使用Btrace来动态监控方法的参数和返回值

    btrace简介: btrace是一种动态跟踪分析一个运行中的Java应用程序的工具,它基于java的探针技术动态地向目标应用程序的字节码注入追踪代码(字节码追踪),这些追踪字节码追踪代码使用Java ...

  2. [压缩]C#下使用SevenZipSharp压缩解压文本

    using SevenZip; using System; using System.Collections.Generic; using System.IO; using System.Linq; ...

  3. Java虚拟机八 分析Java堆

    常见的内存溢出的原因及其解决思路 1.堆溢出: 由于大量的对象都直接分配在堆上,因此它最有可能发生溢出.因为大量对象占据了堆空间,而这些对象都持有强引用,导致无法回收,当对象大小之和大于堆空间时就会发 ...

  4. thinkCMF----如何写标签

    ThinkCMF写标签的地方:

  5. CodeFirst Update-Database 出现对象'DF__**__**__**' 依赖于 列'**'。

    今天在使用Mirgration更新数据表时,出现这样一个错误 经排查,是由于CodeFirst在创建数据库时会为不可为null的字段创建默认值约束 只要在数据库中删除这个约束就可以解决

  6. TFS二次开发02——连接TFS

    在上一篇<TFS二次开发01——TeamProjectsPicher>介绍了  TeamProjectsPicher 对象,使用该对象可以很简单的实现连接TFS. 但是如果我们要实现自定义 ...

  7. Solr学习笔记之5、Component(组件)与Handler(处理器)学习

    Solr学习笔记之5.Component(组件)与Handler(处理器)学习 一.搜索篇 拼写检查(spellCheck) 作用:用来检查用户输入的检索内容是否存在,如果不存在则给它提示出相近或相似 ...

  8. JSTL 学习

    对于页面访问数据的统计,可以使用内置对象的相应方法进行计数工作,这个对象要在jsp对象的整个生命周期中setAttribute()和getAttribute()application.setAttri ...

  9. Python面向对象:继承和多态

    继承与多态简介: 继承可以把父类的所有功能都直接拿过来,这样就不必重零做起,子类只需要新增自己特有的方法,也可以把父类不适合的方法覆盖重写. 动态语言的鸭子类型特点决定了继承不像静态语言那样是必须的. ...

  10. FCoin API

    本文介绍FCoin API 介绍 通过了解以下信息,您可以方便的使用 FCoin 提供的 API 来接入 FCoin 交易平台. 认证 执行下面的代码进行用户验证: import fcoin api ...