1. <label for="" style="float:right;margin-right:10%;">
  2.     <input type="checkbox" style="float:left;" /><span style="width:80px; height:20px; line-height:25px; float:left;">记住密码</span>
  3. </label>

上面的代码显示的效果是这样子,拙计死了,用Firefox中的firebug查看发现checkbox的宽高有点大,把“记住密码”给挤了,知道原因之后,怎么办?

修改宽高呗!



 显示效果

问题又来了,水平没有对齐呀,怎么办?问了一个QQ群的大牛,一句话点醒我了,我也告你,免得你也捉急。



就是这个display:block;我去,差点没整死我,早知道就不会这样子了。要想设置span标签的宽高,首先必须得把它转成块状元素,然后一切问题就都解决了,然后就没有然后了
该float的float,该设置宽高的设置宽高,OK搞定了。




  1. <label>
  2. <input type="checkbox" style="width:18px;height:18px;float:left;"/>
  3. <span style="width:60px;height:18px;line-height:25px;display:block;float:left;">记住密码</span>
  4. </label>



使用bootstrap时,选项框出现的意外效果,怎么办?的更多相关文章

  1. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  2. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  3. [js开源组件开发]模拟下拉选项框select

    模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...

  4. MIUI选项框开关样式模拟

    有IOS的开关模拟,当然也有MIUI的开关模拟 看到设置选项里面的开关样式,突发奇想地来试试    最终效果如图: 实现过程 1. 选项框checkbox 模拟开关当然需要一个选项框,这里用到了复选框 ...

  5. iOS webview加载html自定义选项框选词

    项目要求:webview加载html网址,内容为英文文本,需要获取文本上的单词 这个是最终效果图: 思路是先实现自定义的选项框(不带系统选项)再获取到滑选的单词: 实现的步骤: 首先是替换掉系统长按出 ...

  6. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

  8. layui实现类似于bootstrap的模态框功能

    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...

  9. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

随机推荐

  1. Application.DoEvents()

    今天,在按照书上的一个winform例子做练习(实则就是边看边抄了一遍...)的时候,看到Application.DoEvents()这个方法,但是并不明白这个方法是做什么用的.只知道不用这个方法的话 ...

  2. 【Ecstore2.0】第三方信任登陆问题解决_备忘

    ECSTORE2.0的信任登陆模块开启后,需要拿着授过权的ID在官网进行配置才可以使用,但是客户的授权证书一时无法使用,而跳过认证的话功能又用不了,所以就自己临时搭了一个测试用的认证服务器和信任登陆平 ...

  3. PXE简要配置过程

    目录 1.所需服务 2.简要配置过程     1.dhcp服务     2.tftp服务     3.提供pxelinux.0配置文件     4.提供系统所需文件 1.所需服务:     dhcp服 ...

  4. Hdu1089

    #include <stdio.h> int main() { int a,b; while(scanf("%d %d",&a,&b)!=EOF){ p ...

  5. Ubuntu14.0.4 64位安装ADT问题

    将ADT 解压之后,新建Android工程后没有R文件: google之后说要安装 ia32-libs 提示如下: 安装lib32z1 安装完成后,再次新建工程,报错如下: 编译存在问题:则继续安装以 ...

  6. NOI十连测 第四测 T3

    思路: 算法一:可以n^2找出每个点的权值,然后n^2做完,预计得分10 算法二:随机找点然后每次找最高..貌似只有10分?然而考试的时候煞笔了,边界设成inf.. 算法三:随机找几个点,然后随机爬山 ...

  7. shell重定向

    输入重定向 和输出重定向一样,Unix 命令也可以从文件获取输入,语法为: command < file 这样,本来需要从键盘获取输入的命令会转移到文件读取内容. 注意:输出重定向是大于号(&g ...

  8. Python 列表生成式、生成器、迭代器

    列表生成式 列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 如果要生成[1x1, 2x2, 3x3, ..., 10x10]怎么 ...

  9. Python关于eval与json在字典转换方面的性能比较

    背景介绍 因为python中有eval()方法,可以很方便的将一些字符串类型与字典等数据结构之间进行转换, 所以公司的数据处理同事在保存一些特殊数据时就直接将字典的字符串保存在数据库中. 在程序中读取 ...

  10. TRIZ系列-创新原理-32-改变颜色原理

    改变颜色原理的详细描写叙述例如以下:1)改变物体或其环境的颜色:2)改变物体或其环境的透明度:3)对于难以看到的物体或过程.使用颜色加入剂来观測.4)假设已经使用了这样的加入剂,那么使用发光跟踪或原子 ...