记录一下两个inline-block的上下偏移问题

最新推荐文章于 2022-03-28 19:00:00 发布

Johnsno

最新推荐文章于 2022-03-28 19:00:00 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/u012148262/article/details/79242122

版权

首先，inline的高度是由font-size决定的。

当转换为inline-block的时候，如果没有脱离文档流，其文档线依旧存在。

如图：左元素text-align=middle。右端inline-block无元素，高度设置为63，导致左元素偏移。

再如图：加入元素，导致的右元素偏移

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Johnsno

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

u013262823的博客

05-10

777

场景复现：一次开发中，出现了这种类似需求。看到设计稿后，巴拉巴拉写好了，发现问题来了： <span> <i class="iconfont icon-none c-9 fz16"></i> 未找到" </span> <span class="keyValue">{{value}}</span> &l...

leveldb(三) Block类--解析block数据

dddgggd的博客

01-11

405

返回第index个重启点信息的实际内存位置，restarts_表示重启点数组的起始位置偏移量，data_+restarts_表示重启点数组的起始位置，加上index倍的4字节整形长度，就是第index个重启点的实际地址。函数返回下一个entry的起始地址距离data_的偏移量，value.data()表示value部分的起始地址，value.size()表示value部分的长度，减到data_，就是value的尾部距离data_的偏移量，也是下一个entry的起始位置距离data_的偏移量。

参与评论您还未登录，请先登录后发表或查看评论

相邻的两个inline-block节点为什么会出现间隔，该如何解决

阳光下的冷静的博客

05-09

2639

相邻的两个inline-block节点之间的间隔问题解决方法

两个inline-block元素靠近为什么有间隙？

CRMEB小程序商城的博客

03-28

1896

前言相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧一、问题描述废话不多说,上图代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co

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

陈小峰（iefreer）的专栏

12-28

1万+

在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。

同行设置两个（若干）inline-block元素，位置偏移问题

qq_37480422的博客

07-12

963

这两天在公司写前端，一直在搞数据可视化相关方面，一直在弄大屏展示，其中就需要把两个（多个）div放置到一行上，结果我放置之后发现第二个div把第一个div挤下去了（后来发现并不是这么回事）首先先贴出我的代码 HTML <div class="disease-choose"> <div class="disease-choose-title titles"> 疫病筛选...

解决div inline-block 加内容后出现偏移

yuxiaoc的博客

08-14

659

<div class="con"> <div class="colorDiv">xxx</div> <div class="color"></div> </div> 加了xxx 出现了div 向下偏移原因： inline-block 默认属性 vertical-align：baseline 基线对齐改为 top即可 <style> .con { marg.

inline-block布局挑战与解决策略

在处理跨浏览器兼容性时，开发者可能还需要关注IE6和IE7，这两个早期版本的IE浏览器并不完全支持`inline-block`，可以通过添加`*zoom: 1;`和`display: inline;`的hack来模拟`inline-block`的行为。此外，确保使用...

.【多选题】（10分）<ul id="menu"> <li><a href="#">首页</a></li> <li><a href="#">要闻</a></li> <li><a href="#">一点号</a></li> </ul> 下面哪个样式定义方案可以把上面的无序列表变成横向导航： A. ul#menu li{float: left;};ul#menu a{display: inline-block;} B. ul#menu{position: relative;};ul#menu li{position: absolute;};ul#menu a{display: inline-block;} C. ul#menu li,ul#menu a{display: inline-block;} D. ul#menu{display:flex;};ul#menu a{display: inline-block;}

最新发布

03-14

### 使用 CSS 实现横向导航...综上所述，在实际开发过程中建议优先考虑 **`display:flex`** 或者 **`display:inline-block`** 来完成此类任务，因为这两种方案兼顾了效率与可维护性的同时也具有较好的跨浏览器支持度。

让两个Div并排显示的多种方法

09-25

使用绝对定位可以创建复杂的布局，通过设置左右边距或偏移量，可以使两个div并排显示。 ```css body{margin:0;height:100%} html{height:100%} /* 兼容firefox的div高度100% */ #left{position:absolute;top:0;left...

解决 display:inline-block 左右间距问题 & 上下不对齐问题

BigOrange的博客

08-02

2842

一、左右间距问题.h-div{ width:100px; height: 50px; background: plum; border: 1px solid darkslateblue; display: inline-block; }<div class="h"> <div class='h-div'></div> <div class='

元素设为inline-block元素里有内容与无内容导致的错位问题

liona_koukou的博客

04-24

872

描述：一个div里放置三个span元素，三个span设置为display:inline-block;使其能在同一行显示并可以设置高度宽度问题：span里有无内容会导致该span元素的位置错位图：代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&g...

display:inline-block造成的元素间隔以及高度错位

zoey的博客

08-28

793

当设置display：inline-block的时候，可能会出现或者，这是因为此时的元素具有文本属性，只要标签与标签之间有间隔都会被当作以一个字体大小的空格，那么自然就会出现间隙，而垂直方向上，文本的基线不同就会造成错位；解决方法：添加以下代码 #parent{ font-size: 0; letter-spacing:-4px; /* font-size:0; 在sa...

关于inline-block高度带来的bug及解决方案

qq_25650505的博客

11-27

1567

目录前言寻找问题的根源1. input标签默认样式中的影响因素2. 排除elementUI对input标签的影响解决方法前言今天在开发当中偶然遇到一个问题，如下图，这里引入一个 input标签，利用input的focus来实现时间线的定位。在 v-show 和 v-if 为 false 时不能正常的调用focus方法来实现时间线的定位，所有要通过css样式来将input标签从页面内“隐藏”，同时不能通过display:none的方式来实现于是就尝试，将input的宽高内外边距设置为0，于是问题

inline-block之后意外发现块下沉

qq_27545151的专栏

09-20

8577

前几天面试某M公司的前端开发，被虐了一通之后，发现自己的前端学的真是一塌糊涂，总结一下各个问题，发现前端之路漫漫，还需潜心修行。在网上查找关于浏览器兼容的问题，几乎每一篇都提到了inline-block的问题。自己动手测试了一下，发现了一个意外的现象——当设置块元素display:inline-block之后，如果某些块写了文字，某些不写，写了文字的就会下沉，但如果都不写或者都写了，就不会出现

inline-block元素出现位置错位的解决方法

weixin_34375233的博客

11-30

456

如下代码所示： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block; hei...

为什么display:line-block的a标签会加上文字之后会向下移动呢？

littlebird_cl的博客

07-05

6747

1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐，对齐的是第一个元素里面字的下划线，所以第二个元素的下边缘对齐的是1的下划线，只要在第二个元素里面加内容或者加个空格( )就可以了。个人认为inline-block和inline性质一样，只是一个可以设置宽高一个不可以。 2.inline-block的默认对齐方式的问题 inlin

「前端早读君008」新手必踩坑之display: inline-block

weixin_34416754的博客

01-02

243

今日励志语往日不可追，来日犹可期，祝大家2019年继往开来迷之间隙我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下： <div class="nav"> <div class="nav-item"><a>我</a></div> ...

多个div在一个div中一行水平显示(inline-block)