div添加display: inline-block;后添加文字盒子位置发生改变

最新推荐文章于 2024-07-24 20:00:00 发布
最新推荐文章于 2024-07-24 20:00:00 发布
阅读量2.6k 收藏 6
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41643226/article/details/88761608
版权

学习记录：

在实际开发中遇到一个问题，display: inline-block;的div在其中添加文字或者其他元素都会导致盒子位置发生改变，我上网搜了一下，查到了解决方案，给inline-block的元素添加一个属性：vertical-align:middle（不知道原因）就解决了

Sun_mm哭了。
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
设置display:inline-block后内容为空和不为空 位置发生改变
qq_37582010的博客
01-31 536
将四个span标签设置diplay:inline-block，起始值都为空时，保持在同一水平位置 这里的css如下，自己感觉完全不会有问题的 span{ display: inline-block; width: 35px; height: 35px; color: #000000; line-height: 35px; mar...
css总结 -使用display：inline-block，出现元素高度错位
benben0729的专栏
08-30 9972
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致，发生错位。 <style> .left{ display:inline-block; height:110px; width:110px; } .right{ display:inline-block; height:110px; width:110px; } </style> ...
inline-block元素出现位置错位的解决方法
weixin_34375233的博客
11-30 370
如下代码所示： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block; hei...
display: inline-block； 是什么意思？
最新发布
m0_72231179的博客
07-24 345
display: inline-block; 是什么？及display 的使用方法
div添加文字位置会改变的问题
ClearLoveQ的博客
05-18 3915
div中不添加文字是这样的： 但是在div中添加了文字之后，就会偏移位置，像下面这样： 造成这样的原因是因为给div设置了inline-block的原因 解决办法就是再给div添加一个属性vertical-align:middle; ...
采用display:inline-block设置多个div并列，div内添加内容后div错位
Acid_lemon的博客
06-02 447
页面代码 <div class="transfer"></div> <div class="operations"></div> <div class="transfer"></div> .transfer{ display: inline-block; width: 380px; height: 208px; border: 1px solid #D5DEED; background-color
“设置display:block-inline的li或div中添加文字后，导致li或div排版掉落、错位”的原因及解决方法
titoni_yunruohan的博客
11-25 3961
 情景    在了解可以通过设置display：inline-block会将块级元素拥有inline元素一行排列的特性，那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列，这时候你可能说通过设置浮动float就可以解决，不着急，float的原理和实现作为补充内容会接着聊，那么接下来先通过效果图来看一下问题所在 代码展示（通过设置display将li...
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
display:inline-block的原理分析
09-25
然而，对于块级元素，设置 `display:inline-block` 只会触发 layout，但不会改变元素的布局模式，因此不会达到预期的 `inline-block` 效果。 在 IE 中实现 `display:inline-block` 效果有两种常见方法： 1. 首先...
深入display:inline-block
09-25
1. 先使用`display:inline-block`触发hasLayout，然后在同一个选择器中添加`display:inline`，这样元素会先变为内联元素。注意，这两个声明必须分开写，否则IE不会正确处理。 ```css div { display: inline-block; ...
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
在CSS布局中，`display: inline-block` 是一个常用的属性，它允许元素以行内元素的方式排列，同时具有块级元素的部分特性，如指定宽度和高度。然而，使用`display: inline-block` 时，元素之间往往会出现一些...
DIV 设置 display：inline-block 导致 DIV 对不齐的解决方法
chrisyard的博客
07-25 2440
1.将div的样式中加上，vertical-align:top; 2将inine-block改为inline-table
多个div横排位置错乱
小码哥
06-06 516
如果你用了display:inline-block; 那么给相应的div加上vertical-align:middle就能解决这个问题了
inline-block导致的错位问题详解
kliberty的博客
02-25 754
如图：想要让黄、红两个盒子水平排列，方法有很多，有position定位，float浮动，实在不行还有弹性盒display：flex；还有一种方法就是display：inline-block；将其变成行内块元素，便可以水平排列，但是问题就出现在了这里，当我们设置display：inline-block；后会出现下图的情况 出现这种错位的原因，其实是因为我们编写css所使用的编辑器，给每一个元素都添加了一个默认的vertical-align:baseline;属性；baseline是基线对齐的意思，基线即我们
盒子添加：hover属性时内容出现抖动（原因和解决办法）
2201_75935630的博客
10-08 1006
想要设置盒子添加：hover属性时就显示边框的效果，但盒子里的内容会出现明显的抖动。由属性引起，当一个盒子使用了属性，不管你设置边框、内边距，都是计算在盒子的宽高内，所以由于：hover属性突然插入一个border就会导致盒子里的内容重新调整位置，而出现视觉上的抖动。
多元素高度不一致浮动错位问题
H-L的博客
04-25 1799
当多元素高度不一致时，经常会出现，元素错位的现象，如下：当给浮动元素加上clear:both后即可完美解决
css:inline-block存在的小问题
weixin_45977625的博客
01-06 575
问题： 最近在项目中遇到一个问题，在div使用了display:inline-block后，div之间会存在空白间隙，翻阅资料后发现，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。 去除空隙的方法： 1.将子元素标签的结束符和下一个标签的开始符写在同一行 或 把所有子标签写在同一行； 2.父元素中设置font-size为
display:inline-block 出现的元素错位问题及解决方案
热门推荐
雾隐雾现的至渝博客
04-21 2万+
背景             布局想让两个div在一行显示，用了display:inline-block             但是出现了如图的错位情况，左边放了ul 右边就突然往下拉跨了一段 解决办法             在display:inline-block 后面添加
关于display: inline-block;加了文字与不加文字框架对不齐的问题解决
lth1156187401的博客
05-10 923
当写了三个&lt;i&gt;标签，红色的标签加了文字，黄色的没有加文字，明显两个框上下不一致，感觉加了文字后块会下沉，不管调内边距和外边距都不管用，后参考文章（https://blog.csdn.net/esther_heesch/article/details/51340730）加上了vertical-align:text-top属性后，无文字的块就变成了绿色块的样子，下沉了，与前面的文字也就对...
display: inline-block什么意思
12-10
display: inline-block是CSS中的一种属性，它可以将元素呈现为内联元素和块级元素的混合体，同时保留块级元素的特性，例如可以设置宽度、高度、内边距和外边距等。inline-block元素会在同一行内排列，并且可以通过...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值