在写一个登陆界面的时候,设置登录按钮的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. 如何通过seo技术提高网站对用户的友好度

    http://www.wocaoseo.com/thread-129-1-1.html    今天的天气又是29度,眼看着满大街的人都穿着短袖和衬衣了,自己也再不能穿个厚厚的外套出去了,要不会被别人笑 ...

  2. 贝塞尔曲线(B-spline)的原理与应用

    什么是贝塞尔曲线? 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线. 来源 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Béz ...

  3. if-else 可以这么写

    最近部门在对以往的代码做一些优化,我在代码中看到一连串的 if(){}elseif(){} 的逻辑判断.这明显是有优化空间的. 由于内部代码不适合分享,这里我就用 <输出今天为星期几> 来 ...

  4. HDU-4417-Super Mario(主席树解法)

    Mario is world-famous plumber. His “burly” figure and amazing jumping ability reminded in our memory ...

  5. vue中使用柱状图

    子组件 <template> <div> <div id="myChart" :style="{width: '400px', height ...

  6. IDEA 2020 集成 Activity插件

    我按照教程打开settings-plugins,搜索actiBPM搜索不到, 于是我就去下载插件,然后再安装,具体步骤如下: 下载插件: 到http://plugins.jetbrains.com/, ...

  7. Spring security OAuth2.0认证授权学习第二天(基础概念-RBAC)

    RBAC 基于角色的访问控制 基于角色的访问控制用代码实现一下其实就是一个if的问题if(如果有角色1){ } 如果某个角色可以访问某个功能,当某一天其他的另一个角色也可以访问了,那么代码就需要变化, ...

  8. Pycharm安装opencv与 无法安装PIL以及安装Pillow之后依然报错的解决办法

    Pycharm 安装opencv pycharm里自带了很方便的安装第三方库的方法,不需要自己去下载opencv包再pip install 在pycharm的File/Settings/Project ...

  9. 高德地图POI爬取_Python

    高德地图POI 官方文档:https://lbs.amap.com/api/webservice/guide/api/search#introduce 官网控制台:https://lbs.amap.c ...

  10. ASP.NET Core整合Zipkin链路跟踪

    前言     在日常使用ASP.NET Core的开发或学习中,如果有需要使用链路跟踪系统,大多数情况下会优先选择SkyAPM.我们之前也说过SkyAPM设计确实比较优秀,巧妙的利用Diagnosti ...