在写一个登陆界面的时候,设置登录按钮的margin-top时出了问题

先是这么写的

<div style="margin-top:30px">
  <a style="float:left">注册</a><a style="float:right">找回密码</a>
</div>
<input type="submit" name="" id="" class="btn btn-lg btn-block btn-primary" style="margin-top:20px" value="登录"/>

登录按钮上面是两个a标签,我想让按钮与两个a标签有一些距离,这个button的样式是引用的bootstrap里面的。但是这么写完以后发现外边距并没有起作用。

然后给button套了一个div,设置div的margin,比如这样:

<div style="margin-top:20px;width:100%">
  <input type="submit" name="" id="" class="btn btn-lg btn-block btn-primary" value="登录"/>
</div>

结果还是不行,然后各种查资料尝试后,发现可以给button的父级div加一个float,比如这样:

<div style="float:left;margin-top:20px;width:100%">
  <input type="submit" name="" id="" class="btn btn-lg btn-block btn-primary" value="登录"/>
</div>

成功。

因为我设置的button宽度是100%,所以float对样式的效果并没有什么影响,所以这也算一种解决方法了。

总结:查资料的时候了解到,在Firefox下对margin的处理有些它自己的特点,这里不阐述,网上好多相关知识

-------------------------------------------------------补充-----------------------------------------------------------------------------------------

发现给div设置padding也可以,(如果不影响你的样式的话),给div里面的元素设置margin就生效了。

给子元素设置margin-top无效果的一种解决方法的更多相关文章

  1. 子元素浮动父容器高度不能自适应的CSS解决方法

    百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...

  2. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

  3. 解决子元素设置margin-top,效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  4. CSS子元素设置margin-top作用于父容器?

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  5. 解决:子元素设置margin-top,父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  6. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  7. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  8. 子元素设置margin-top作用到了父元素

    子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解

  9. Qt中QListWidget的verticalScrollMode选项设置为ScrollPerPixel无效果的原因

    设置为ScrollPerPixel无效果,根据Qt手册的描述,需要在设置一次setSingleStep()的值,才会生效

随机推荐

  1. WebRTC的VAD 过程解读

    摘要: 在上一篇的文档中,分析unimrcp中vad算法的诸多弊端,但是有没有一种更好的算法来取代呢.目前有两种方式 1. GMM   2. DNN. 其中鼎鼎大名的WebRTC VAD就是采用了GM ...

  2. 用LR录制终于可以在我的电脑上顺利弹出IE了

    之前在我的电脑上各种折腾,由于是win764bit+IE11,安装了LR11连最基本的录制都没能搞定.google之后各种的尝试,也没能解决问题.狠下心来把IE11换成了IE8,终于可以勉强使用了,没 ...

  3. 【Unity C#编程】自定义数据

    译林军 灰魅|2014-03-04 10:52|10589次浏览|Unity(315)移动应用(31)技术开发(16)0 在这篇Unity C#的文章中,你将会创建一个简单的数据结构,然后写下它的属性 ...

  4. Unity添加自定义拓展方法

    Shepherdog|2014-04-08 10:50|16151次浏览|Unity(373)0 通常你会发现你不能修改正在使用的那些类,无论它是基础的数据类型还是已有框架的一部分,它提供的方法让你困 ...

  5. Pandoanload涅槃重生,小白羊重出江湖?

    Pandoanload涅槃重生,小白羊重出江湖? 科技是把双刃剑,一方面能够砸烂愚昧和落后,另一方面也可能带给人类无尽的灾难. 原子物理理论的发展是的人类掌握了核能技术但是也带来了广岛和长崎的核灾难, ...

  6. redis在windows下安装教程

    安装过程 1.首先先把下载的压缩包解压到一个文件夹中2.打开cmd指令窗口3.输入你刚才解压的文件路径4.然后输入redis-server redis.windows.conf 命令接下来部署Redi ...

  7. Kubernetes v1.12/v1.13 二进制部署集群(HTTPS+RBAC)

    官方提供的几种Kubernetes部署方式 minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环 ...

  8. ZT:如果有来生,要做一棵树

    出处:https://zhidao.baidu.com/question/393644025.html 原以为是三毛所作,想不到还有争议. 如果有来生,要做一棵树, 站成永恒.没有悲欢的姿势, 一半在 ...

  9. .net core Configuration对象

    前因:最近在阅读.net core源码,发现关于Configuration介绍的文档都比较多,但是都比较杂乱,(微软文档太官方),所以写下一些自己的感想 主要通过三种使用情况来介绍 Web应用程序使用 ...

  10. Echars 参数说明

    theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d ...