在写一个登陆界面的时候,设置登录按钮的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. Selenium中核心属性以及方法

    一.操作定位元素 selenium提供了定位元素的API,这些方法都被定义在webDriver类中,需要以find开头, 例如:find_Element_by_id('')

  2. 力扣Leetcode 572. 另一个树的子树

    另一个树的子树 给定两个非空二叉树 s 和 t,检验 s 中是否包含和 t 具有相同结构和节点值的子树.s 的一个子树包括 s 的一个节点和这个节点的所有子孙.s 也可以看做它自身的一棵子树. 示例 ...

  3. 架构设计 | 基于电商交易流程,图解TCC事务分段提交

    本文源码:GitHub·点这里 || GitEE·点这里 一.场景案例简介 1.场景描述 分布式事务在业务系统中是十分常见的,最经典的场景就是电商架构中的交易业务,如图: 客户端通过请求订单服务,执行 ...

  4. Python多线程爬虫详解

    一.程序进程和线程之间的关系 程序:一个应用就是一个程序,比如:qq,爬虫 进程:程序运行的资源分配最小单位, 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知 ...

  5. ZOJ-2972-Hurdles of 110m(记忆化搜索)

    In the year 2008, the 29th Olympic Games will be held in Beijing. This will signify the prosperity o ...

  6. JavaWeb三大器(过滤器、拦截器、监听器)概念梳理

    最近工作碰到了一个问题:项目A需要收集项目B中的用户活跃数信息,最后通过HttpSessionAttributeListener实现.在开发过程中,网上查找了过滤器.拦截器.监听器的帖子,这里对自己收 ...

  7. vueRooter的总结

    这一周学习了Vue的脚手架的结构,最重要的router 该进行总结和回忆了. 1首先是router的安装,用npm命令npm install vue-router --save 2装完后,在main. ...

  8. 一文搞懂WordPress建站

    文章首发于:https://zouwang.vip/ 日日夜夜的等待,WordPress建站教程终于来了.本篇文章适用于第一次建站的小白,帮助你从零搭建起一个属于自己的网站,既然是从零,那么我就会带着 ...

  9. 你会Spring Cloud吗?

    如果有人问你这句话,你不要急着回答,因为答语和问者的关系莫大. 如果问你的是个老板或管理者,那么他多半不了解这项技术,很有可能只是知道这个技术名词而已,你知道的一定比他们深,你大可夸夸其谈的.在口若悬 ...

  10. sudo提权,ansible批量给所有主机创建系统账户,授权

    sudo(superuser or another do)让普通用户可以以超级管理员或其他人的身份执行命令. sudo基本流程如下: 1.管理员需要先授权(修改/etc/sudoers文件) 2.普通 ...