.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. 【CF662C】Binary Table 按位处理

    [CF662C]Binary Table 题意:给你一个$n\times m$的01网格,你可以进行任意次操作,每次操作是将一行或一列的数都取反,问你最多可以得到多少个1? $n\le 20,m\le ...

  2. github相关资料记录

    github官方配ssh api:https://help.github.com/articles/generating-ssh-keys 简书hexo静态博客搭建:http://www.jiansh ...

  3. Qt Package Project 打包发布程序

    在Qt项目开发完成后,我们想将项目打包发布成一个可执行文件,需要做如下步骤: 首先,将项目中的release文件中的可执行文件拷到一个新建的文件夹中,例如project.exe,用Qt自带的生成必备的 ...

  4. MapReduce规约

    深入了解Combiners编程(相当于Map端的Reduce) 每一个map可能会产生大量的输出,combiner的作用就是在map端对输出先做一次合并,以减少传输到reducer的数据量. comb ...

  5. ZOJ 3948 - Marjar Cola

    让我回想起了小学的时候,空瓶换饮料还能向别人借一个空瓶喝了再还回去的神奇问题…… 开始时思考,特判一下a=1或者b=1的情况为INF就可以了,然后发现2 2 1 2这样的样例也是能够喝到无穷多瓶饮料的 ...

  6. iOS-多语言版本开发(二)(转载)

    题记   iOS 多语言版本的开发(一) 中我们完成了让应用跟随系统语言进行切换,而用户自己却不能切换的功能,也基本上算是实现了多语言版本:可是,对于某些应用来说,实现跟随系统语言切换的同时, 也想要 ...

  7. HTML_css选择器

    第二种增加css样式的方法,可以在head中增加style标签,style中通过选择器定位标签增加css样式 CSS选择器分为六种: 1.id选择器 2.class选择器   3.标签选择器   4. ...

  8. 学习计划 nginx try_files的作用

    之前的nginx配置中,我链接了php和nginx之间是怎么通信和$_SERVER参数的作用. 现在有一个问题,我要配置自己的框架,我需要的参数的是 IP/控制器/方法/参数 但是现在配置的话ngin ...

  9. 洛谷P3953 逛公园 [noip2017] 图论+dp

    正解:图论(最短路)+dp(记忆化搜索) 解题报告: 这题真的是个好东西! 做了这题我才发现我的dij一直是错的...但是我以前用dij做的题居然都A了?什么玄学事件啊...我哭了TT 不过其实感觉还 ...

  10. mac 10.12显示隐藏文件

    macOS Sierra 10.12版本 显示隐藏文件   1.显示隐藏文件 打开Terminal 输入:defaults write com.apple.finder AppleShowAllFil ...