给子元素设置margin-top无效果的一种解决方法
在写一个登陆界面的时候,设置登录按钮的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无效果的一种解决方法的更多相关文章
- 子元素浮动父容器高度不能自适应的CSS解决方法
百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- CSS子元素设置margin-top作用于父容器?
CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- 子元素设置margin-top后,父元素跟随下移的问题
子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...
- 子元素设置margin-top作用到了父元素
子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解
- Qt中QListWidget的verticalScrollMode选项设置为ScrollPerPixel无效果的原因
设置为ScrollPerPixel无效果,根据Qt手册的描述,需要在设置一次setSingleStep()的值,才会生效
随机推荐
- .NET5.0 单文件发布打包操作深度剖析
.NET5.0 单文件发布打包操作深度剖析 前言 随着 .NET5.0 Preview 8 的发布,许多新功能正在被社区成员一一探索:这其中就包含了"单文件发布"这个炫酷的功能,实 ...
- spring集成shiro,事务失效问题 not eligible for auto-proxying
BeanPostProcessor bean实例化顺序有关,@Configuration会最先实例化,也就是在spring启动完成之前. 导致Configuration中使用的注入,没能在spring ...
- 记录一个基于Java的利用快排切分来实现快排TopK问题的代码模板
使用快排切分实现快排和TopK问题的解题模板 import java.util.Arrays; public class TestDemo { public static void main(Stri ...
- 【Go语言入门系列】(九)写这些就是为了搞懂怎么用接口
[Go语言入门系列]前面的文章: [Go语言入门系列](六)再探函数 [Go语言入门系列](七)如何使用Go的方法? [Go语言入门系列](八)Go语言是不是面向对象语言? 1. 引入例子 如果你使用 ...
- Linux系统小知识
换Linux系统快半年了,刚开始总是碰到各种各样的问题,虽然斗解决了,由于没有记录,过一段时间就忘了,故在这里记录一下. 选择国内镜像源: Manjaro有一个很好用的命令rankmirrors.ra ...
- Sympy解方程-求极限-微分-积分-矩阵运算
简介 Sympy是一个Python的科学计算库,用一套强大的符号计算体系完成诸如多项式求值.求极限.解方程.求积分.微分方程.级数展开.矩阵运算等等计算问题.虽然Matlab的类似科学计算能力也很强大 ...
- 借助FreeHttp任意篡改Websocket报文(Websocket改包)
前言 作为Web应用中最常见的数据传输协议之一的Websocket,在我们日常工作中也势必会经常使用到,而在调试或测试中我们常常也有直接改变Websocket数据报文以确认其对应用的影响的需求,本文将 ...
- VUE常用问题hack修改
vue-router router这里踩的坑主要是组件的重用.构建单页面大型应用的话,肯定要开启组件的缓存的,因为一般会要求后退的时候不要重新加载页面,而且要记住原始的滚动位置.首先,引入router ...
- Java实现简单混合计算器
这个计算器并不是基于逆波兰实现的,而是通过简单的递归,一层一层地计算最终求得结果. 具体的图形化界面可以参考我的另外一个篇博客:基于逆波兰表达式实现图形化混合计算器,这里我只是简单的介绍一下怎样求得算 ...
- vue.js 的安装
包含vue的脚手架的安装. 1,到项目目录下输入 cnpm i -g vue-cli 2,安装完毕后咱们看看.输入 vue 即可看到vue的安装情况. 3,输入 vue list 即可看到框架的选择 ...