在写一个登陆界面的时候,设置登录按钮的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. UnitTest单元测试框架解析【实用篇】

    UnitTest是展开自动化测试的基础——这个框架很重要!首先我们先自己写一个测试类: 1.被测试类 Widthget.py: # coding: utf-8class Widthget: def _ ...

  2. css面试题汇总 (持续更新)

    前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...

  3. MSP430-LED中断闪烁代码详解

    使用MSP430F149的开发板,首先对LED闪烁灯的例程进行讲解,然后下边是自己写的,将部分代码写入了新建的led.c程序中 #include  <msp430x14x.h>       ...

  4. Android开发之下载服务器上的一张图片到本地java代码实现HttpURLConnection

    package com.david.HttpURLConnectionDemo; import java.io.FileOutputStream; import java.io.IOException ...

  5. Selenium多浏览器处理

    当我们在执行自动化测试过程中,往往会针对不同的浏览器做兼容性测试,那么我们在代码中,可以针对执行命令传过来的参数,选择对应的浏览器来执行测试用例 代码如下: 在终端中执行命令如上图红框中所示: bro ...

  6. iOS开发知识梳理博文集

    前言 做iOS开发有3年了,从当初的小白到现在,断断续续看过很多资料,之前也写过一些博文来记录,但是感觉知识点都比较凌乱.所以最近准备抽时间把iOS开发的相关知识进行一个梳理,主要分为OC基础.UI控 ...

  7. 初学WebGL引擎-BabylonJS:第6篇-碰撞交错与挑选

    [playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...

  8. 01vue.config.js

      const path = require('path'); module.exports = { // 基本路径 publicPath: process.env.NODE_ENV === 'pro ...

  9. 机器学习,详解SVM软间隔与对偶问题

    今天是机器学习专题的第34篇文章,我们继续来聊聊SVM模型. 我们在上一篇文章当中推导了SVM模型在硬间隔的原理以及公式,最后我们消去了所有的变量,只剩下了\(\alpha\).在硬间隔模型当中,样本 ...

  10. Java常用工具类整理

    字符数组转String package com.sunsheen.hcc.fabric.utils; /** * 字符数组工具 * @author WangSong * */ public class ...