使用display: inline-block;遇到的问题及解决

最新推荐文章于 2023-09-15 15:36:26 发布

weixin_30558305

最新推荐文章于 2023-09-15 15:36:26 发布

阅读量575

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mesopotamiazZ/p/8014196.html

本文介绍了解决使用display:inline-block布局时出现的元素间间隙及上下错位问题的方法，包括调整书写方式、设置父元素font-size为0、使用vertical-align属性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用display: inline-block;布局div会使两个字div中间产生间隙，解决办法有多种:

①可以不换行的将两个div书写在一行，因为换行也会占dom文档流。

②可以在父元素中加上font-size: 0;也能消除中间间隙。

2、有些时候两个使用display:inline-block;的两个子元素可能会出现上下错位的情况，也就是没有上上部对齐，发生这种问题的原因是inlin-block会使两个div下部对齐，解决办法：

①让两个div高度相同。

②如果两个div高度不相同，可以使用vertical-align: top;进行对齐

③使用overflow: hidden;解决

转载于:https://www.cnblogs.com/mesopotamiazZ/p/8014196.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30558305

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。

IT修真院：初学者转行到互联网的聚集地

05-13

942

这里是修真院web小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解web知识/技能，本篇分享的是：【 inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。】大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家...

使用display:inline-block会产生什么问题？

qq_46179838的博客

02-16

312

一、问题当我们写出两个方块盒子时，系统知道div是块级元素，会独占一行，所以这是我们就需要让块级元素变成行级块元素（使用两个display；inline-block;），但此时又会引发一个新的问题：元素放到一起会中间产生一段空白。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

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

使用display:inline-block会产生什么问题？解决方法？

Bliss_妍的博客

08-16

778

问题: 两个display：inline-block元素放到一起会产生一段空白。产生空白的原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。解决办法： 1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

使用display:inline-block 会产生什么问题？解决方法

qq_45886500的博客

08-27

336

当两个inline-block元素放在一块的时候会产生一个空白间隙产生原因是元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。解决办法 1、给子元素添加float:left属性 .inline1,.inline2 { displ

display:inline-block带来的问题及解决办法

weixin_30549175的博客

01-11

315

在日常工作中，会经常遇到两个或多个元素并排排列的效果，以前会使用float等实现，float虽然方便好用，但是需要清除浮动，有时会带来意想不到的bug 而且在移动端是不推荐使用float的，所以使用display:inline-block是一个不错的选择。但是display:inline-block有时也会带来各种问题，下面是我遇到的一些问题并附带解决办法（有的问题目前我还没有找到...

CSS属性display:inline-block用法深入理解

09-25

下面我们将深入探讨`display:inline-block`的用法及其浏览器兼容性问题。首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-...

display:inline-block的使用示例

09-25

在给定的示例中，我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。在传统的多列布局中，我们通常使用`float:left`来实现元素并排显示。然而，这种方法存在一个问题，即如果父容器的宽度小于...

display:inline-block的原理分析

09-25

例如，旧版本的 Firefox 使用 `-moz-inline-box` 来模拟 `display:inline-block` 的效果，但这可能导致一些问题，如 `text-align` 属性的不正常行为，可能需要借助 `-moz-box-align` 解决。因此，通常建议避免使用...

【HTML+CSS】之CSS布局

qq_37086980的博客

08-06

517

常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

display:inline-block属性的标签出现的问题及解决方法

热门推荐

奋斗小强的博客

07-24

1万+

1，首先说明display:inline-block可以让块级元素并排显示，但是需要注意一些问题，如下； 1、有些标签是默认的inline-block属性，例如img 和input，这些标签称为行内块标签 1.对于img标签会出现白边问题，如下： <!DOCTYPE html> <html lang="en"> <head> <meta ch...

CSS中display属性的inline-block导致布局错位问题

梦凝哲雪

07-24

1310

当然也可以是使用浮动float 或者弹性盒子flex 完成上述需求。发现核心问题是 inline-block 默认的对齐方式。

两个inline-block元素上下不对齐，出现错位

之度的博客

10-23

8559

问题描述：在类似发现深藏的好店的布局中img和p都设置为inline-block。发现两个元素虽然在同一行上，但并不对齐。是基线对其问题，进一步来说，两个 inline-block 的元素都按照默认的垂直对齐方式为什么会产生不同的对齐效果？原因在于容器使用了 overflow: hidden 属性，这一属性改变了 inline-block 元素的基线

关于display:inline-block问题总结

acatlooklikegad的博客

07-18

950

问题一：内联块之间会有一小段空白。原因：两个有内联元素性质的div之间的空格解决方式：（1）不换行（2）加注释（3）取消标签闭合，但最后一个要加（兼容）（4）给父容器加font-size:0，子元素另行设置（5）父元素Letter-spacing：-3px，子元素letter-spacing:0 （6）父元素Word-spacing:-6px，子元素lette

设置两个DIV为display:inline-block出现上下错位问题

ArcherSYM的博客

08-04

553

原因 1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline 2.对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线解决 1.float方式（考虑脱离流后后面元素不易控制，故不首选） 2.改变vertical-align属性 ...

开启display: inline-block，部分元素上下浮动不对齐

行大于言

11-18

501

我们通常用display:inline-block;来使两个块元素并排横向排列，但是当我们左右两个元素高度不一时，就会出现两个元素发生了上下浮动现象。原因是因为当我们开启display:inline-block;之后，两个元素的对准基线发生了改变，元素的底作为了基线。我们可以开启bfc打破这个规则，也可以直接改变基线对准规则来解决这个问题。 ...

inline-block元素下移问题的分析及解决