inline-block元素设置overflow:hidden 导致相邻行内元素向下偏移的之坑

最新推荐文章于 2023-11-02 16:25:02 发布
最新推荐文章于 2023-11-02 16:25:02 发布
阅读量696 收藏 2
点赞数 1
分类专栏： css 文章标签： inline-block overflow:hidden css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013262823/article/details/90073876
版权

场景复现：
在这里插入图片描述
一次开发中，出现了这种类似需求。看到设计稿后，巴拉巴拉写好了，发现问题来了：

<span>
     <i class="iconfont icon-none c-9 fz16"></i>
       未找到"
</span>
<span
最低0.47元/天 解锁文章
yzbyxmx
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
inline-block元素的4px空白间距解决方案
01-19
有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
热门推荐
陈小峰（iefreer）的专栏
12-28 1万+
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。
html+css 如果父元素写了overflow:hidden；子元素如何不受父元素hidden影响
qq_48959246的博客
11-02 2872
以上是用了网上说的三种方法，最后可以看出只有在overflow: hidden;外层书写position: relative;才能帮助overflow: hidden内层的子元素使用定位脱离被隐藏的命运。
overflow:hidden的两个作用
仗剑天涯
02-25 486
overflow:hidden的两个作用
两个span在一行却高低不一致
weixin_43859703的博客
05-17 2395
给第一个span加了超出部分呢省略号以后，两个span虽然还在一个div中，但是居然不同高了！！一个靠上一个靠下一些，我试了各种css居中的方式也没能让两个span同高； 研究了很久发现是overflow：hidden以及不折行影响的，最后解决办法是使用flex布局，两个span就恢复正常了，万能的flex啊！！！ .textTop{ width: 100%; display:...
使用font-size：0 来去掉inline-block元素之间的空隙方法
12-13
像下面图中的布局，如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。 现代...
inline-block带来的元素间距问题解决
09-24
在`inline-block`模式下，元素可以像文本一样排列在同一行，但也可以设置宽度、高度、内边距和外边距，这使得它在创建复杂布局时非常有用。然而，`inline-block`元素之间有时会出现意想不到的间距，这是由于它们保留...
详解CSS 去掉inline-block元素间隙的几种方法
09-22
《CSS去除inline-block元素间隙的策略与解析》 在CSS布局设计中，inline-block元素的间隙问题时常困扰着开发者。这种间隙可能导致布局错位，影响整体的视觉效果。本文将深入探讨inline-block元素的特性，分析间隙...
inline-block元素默认间距的两种清除方法示例代码
09-24
在网页布局中，`inline-block`元素是一种常用的布局方式，它可以将元素以行内元素的方式排列，同时保留块级元素的宽高特性。然而，在实际使用`inline-block`时，元素之间常常会出现间距问题，这主要是由于HTML源码中...
设置inline-block元素的overflow：hidden意外增加元素总体高度的问题
WEB前端娃——steiny
10-12 7070
来源1：https://my.oschina.net/u/214483/blog/663133 来源2：http://www.yidianzixun.com/home?page=article&id=0BwQmgTc 摘要: 设置inline-block元素的overflow：hidden意外增加元素总体高度的问题工作中遇到的一个问题，设置inline-block元素的overflow：hid
display:inline-block,加上overflow:hidden。导致附近元素塌陷下去
ltf_1225的博客
05-09 1179
今天写东西的时候，发现了如题的问题，后想出来大略两个方法。1.浮动，然后清除浮动2.给加了display属性的元素加上vertical-align: bottom;
css常见问题（3）之解决inline-block布局缝隙问题
qq_29039105的博客
07-16 636
如何解决inline-block布局的缝隙问题
overflow:hidden display:inline-block 行内对齐问题
ISaiSai的专栏
04-22 3601
同时拥有overflow hidden 和 display inline-block 的元素，会对行内元素垂直对齐 有影响， 导致原因是 overflow hidden 改变了默认对齐方式解决办法：添加 vertical-align: bottom参考文档： http://stackoverflow.com/questions/20566710/overflowhidden-displayinl
设置overflow：hidden导致相邻行内元素向下偏移的问题
可以叫我啪叽的石头
04-16 3629
&lt;!-- html --&gt; &lt;div&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;/div&gt; /* CSS */ div span{ display:inline-block; }
inline-block导致换行问题
wallowyou的博客
07-03 1万+
问题： // html &lt;nav&gt; &lt;a routerLink="/home"&gt;主页&lt;/a&gt; &lt;a routerLink="/movies"&gt;电影&lt;/a&gt; &lt;a routerLink="/music"&gt;音乐&lt;/a&gt; &lt;/nav&
overflow: hidden;display: flex;display: inline-flex;display: inline-block;position: absolute;position: fixed;
最新发布
05-31
- display: inline-block：行内块元素，与默认的行内元素相似，但可以设置宽度和高度。 - position: absolute：基于最近的非 static 定位祖先元素的位置来确定元素自身位置，不会改变其他元素的位置。 - position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值