子元素 margin-right 失效

最新推荐文章于 2024-03-20 13:40:09 发布
最新推荐文章于 2024-03-20 13:40:09 发布
阅读量255 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zbz_index/article/details/117292786
版权

使用flex布局做横向滚动时，最后一个子元素 margin-right 失效

参考了 许多篇文章发现没效果
如添加父盒子 、 从flex改成float

最后 发现给父盒子加个 float: left;

就好了-
学艺不精 ，只能给出解决办法 ，至于为什么就不知道了

给个眼神自己体会
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
margin-left和right失效(斯芬克斯)之谜
01-24
一般很多人遇到的margin失效都是纵向上面的: 一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing)）。 那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。 我们来看看具体的失效代码：
div中子div在firefox ie 水平居中对齐
12-12
如果没有设定父元素的宽度，子元素可能会沿其容器的宽度扩展，导致居中失效。 关于为何Firefox和IE对`text-align`和`margin`处理方式不同的猜想，可能与浏览器的内核和盒模型的实现有关。Firefox采用标准的W3C盒...
关于给子盒子设置marign-right 无效果（小白的一点看法）
qq_40215089的博客
04-27 256
刚才在给一个子盒子设置marign-right,居然发现啥效果都没有，又写了个demo发现设置marign-left是有效的，刚开始以为是因为子盒子右边的marign远大于设置的marign值导致没效果的，但是当把子盒子宽度设置和父盒子一样的宽度时，发现还是没效果，最后发现，原来W3C默认元素是左排列，并不是设置的marign没效果，设置float-right，脱离文档流，效果就出来了。。。 ...
斯芬克斯之谜
amorn的专栏
03-12 1062
　　古希腊有个传说,在一个王国城堡的附近有个女魔叫"斯芬克斯"。她整天守着那条过往行人必经的路,让人猜一个谜:"什么东西早上是四条腿,中午是两条腿,傍晚是三条腿"。如果行人不能答对谜底,她就会把他吃掉;如果猜出来了,她自己就会死去。很多人都猜不出谜底,于是王国中死去了许多的人,外面的人也不敢来这个地方了。这时,王国内外都充满了恐惧。终于有一天,一个叫"俄底浦斯"的年轻人来到了斯芬克斯的面前,说出了
margin-right没效果，怎么解决
hechenxi_gaoya的博客
07-21 9127
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。 当没有设置width时，width默认为auto： 这时的margin-right是正常显示的； 当width设置为固定值或者百分比时： margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果： float：left | right；
margin-right无效问题简析
money_monkey的博客
07-18 4626
margin-right无效问题简析
CSS中怎么让DIV居中亲自实验得出的结论
12-02
除了`margin`方法，还可以通过设置父级元素的`text-align`属性为`center`，然后将子`<div>`的`display`属性设为`inline-block`或`table-cell`来实现水平居中： ```css .parent { text-align: center; } .child { ...
详解微信小程序之scroll-view的flex布局问题
12-08
同时，为子元素添加适当的 `margin-right` 以创建间距。在 `wxml` 文件中，使用 `block` 和 `wx:for` 指令循环渲染子组件。 3. **直接使用 `display: inline-block`** 当不使用 `flex` 布局时，可以将 `scroll-...
常见浏览器兼容性问题汇总.doc
10-16
- **自适应高度**：在需要自动扩展高度的场景下，可以使用`display: table-cell`或`display: flex`，使得子元素能够根据内容自动调整高度。 3. **JavaScript兼容性**：JavaScript的兼容性问题主要出现在老版本的IE...
前端面试秘籍.pdf
10-21
* bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。 3. 如何清除浮动？ 清除浮动是指解决浮动元素父元素高度塌陷的问题。方法有： * clear 清除浮动（添加空 div 法） * 给浮动元素父级设置...
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
11-20
2. **清除浮动**：在父元素中没有添加清除浮动（clear:both或clearfix）可能导致子元素的浮动效果失效。 3. **HTML结构**：在原始代码中，`.bannerright`出现在`.bannerleft`之前。根据HTML的渲染规则，元素是...
HTML+CSS相对宽度和绝对宽度冲突时的div解决方法
11-19
当一个元素同时设置这两种宽度时，浏览器通常会优先考虑绝对宽度，导致相对宽度失效。本篇文章将探讨在相对宽度和绝对宽度冲突时如何解决div的布局问题。 首先，我们通过一个示例来说明这个问题。假设我们有一个...
详解css清除浮动float的七种常用方法总结和兼容性处理
11-21
然而，这种浮动特性会导致一个名为“高度塌陷”的问题，即当父元素的子元素浮动后，如果父元素没有设定高度，它可能无法正确包裹住浮动的子元素，从而导致父元素的高度塌陷。为了解决这个问题，我们需要采取一些方法...
css入门笔记
05-15
取值：left左 right右 top上 bottom下 px (%)少用 取值：auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性：background: 取值：颜色 2.背景图片 属性：background-image：url(); 取值：url() ...
view 父子元素margin-right失效解决办法
最新发布
java_csdnn的博客
03-20 361
关于margin-right失效的问题
关于margin-right失效的问题
热门推荐
张大晴的博客
05-16 1万+
关于margin-right失效的问题：浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下  如果子容器的宽度能够被容纳  设置margin-right是没有用的...
CSS ( Flex布局 ) —— 关于flex布局使用滚动条时，最后一个元素margin无效的问题
Mickeymouse
08-21 6645
在开发中，很常用到flex布局，当使用flex布局，需要使用滚动条的时候，最后一个元素会出现margin无效的情况，如下： <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div&
flex布局中margin-right失效
weixin_43331469的博客
09-19 3809
外层div设置flex布局，内层超过外层宽度的元素margin-right无效 <style> .container { display: flex; } .item { width: 20px; margin-right: 10px; } </style> <div class='container'> <div class='item'>item1</div> <div class='item'>item2&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值