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

最新推荐文章于 2023-10-08 20:46:55 发布
最新推荐文章于 2023-10-08 20:46:55 发布
阅读量2.8k 收藏 7
点赞数 4
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41643226/article/details/88761608
本文解决了一个实际开发中遇到的问题：当使用display:inline-block的div添加文字或其他元素时，盒子位置会发生改变。通过添加vertical-align:middle属性解决了这个问题。

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

学习记录：

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

【高频考点精讲】display 属性详解：block、inline、inline-block、none 的区别
全栈老李的博客
07-05 814
display属性就像CSS世界的排版导演，不同的值相当于给元素不同的"人设"：block是霸道总裁——我要独占一行！inline是佛系青年——你们随意我都可以~是斜杠青年——我全都要！none是隐身侠——你看不见我！掌握它们的特性，就能像搭积木一样灵活控制页面布局。我是全栈老李，下期我们聊聊position的玄学，记得关注哦！（本文示例代码已上传GitHub，搜索"全栈老李display详解"获取完整项目）
设置display:inline-block后内容为空和不为空 位置发生改变
qq_37582010的博客
01-31 601
将四个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 1万+
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致，发生错位。 <style> .left{ display:inline-block; height:110px; width:110px; } .right{ display:inline-block; height:110px; width:110px; } </style> ...
inline-block元素出现位置错位的解决方法
weixin_34375233的博客
11-30 471
如下代码所示： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block; hei...
div添加文字位置会改变的问题
ClearLoveQ的博客
05-18 4098
div中不添加文字是这样的： 但是在div中添加了文字之后，就会偏移位置，像下面这样： 造成这样的原因是因为给div设置了inline-block的原因 解决办法就是再给div添加一个属性vertical-align:middle; ...
采用display:inline-block设置多个div并列，div内添加内容后div错位
Acid_lemon的博客
06-02 514
页面代码 <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 4151
 情景    在了解可以通过设置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 2493
1.将div的样式中加上，vertical-align:top; 2将inine-block改为inline-table
多个div横排位置错乱
小码哥
06-06 573
如果你用了display:inline-block; 那么给相应的div加上vertical-align:middle就能解决这个问题了
inline-block导致的错位问题详解
kliberty的博客
02-25 838
如图：想要让黄、红两个盒子水平排列，方法有很多，有position定位，float浮动，实在不行还有弹性盒display：flex；还有一种方法就是display：inline-block；将其变成行内块元素，便可以水平排列，但是问题就出现在了这里，当我们设置display：inline-block；后会出现下图的情况 出现这种错位的原因，其实是因为我们编写css所使用的编辑器，给每一个元素都添加了一个默认的vertical-align:baseline;属性；baseline是基线对齐的意思，基线即我们
盒子添加：hover属性时内容出现抖动（原因和解决办法）
2201_75935630的博客
10-08 1445
想要设置盒子添加：hover属性时就显示边框的效果，但盒子里的内容会出现明显的抖动。由属性引起，当一个盒子使用了属性，不管你设置边框、内边距，都是计算在盒子的宽高内，所以由于：hover属性突然插入一个border就会导致盒子里的内容重新调整位置，而出现视觉上的抖动。
多元素高度不一致浮动错位问题
H-L的博客
04-25 1879
当多元素高度不一致时，经常会出现，元素错位的现象，如下：当给浮动元素加上clear:both后即可完美解决
css:inline-block存在的小问题
weixin_45977625的博客
01-06 617
问题： 最近在项目中遇到一个问题，在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 979
当写了三个&lt;i&gt;标签，红色的标签加了文字，黄色的没有加文字，明显两个框上下不一致，感觉加了文字后块会下沉，不管调内边距和外边距都不管用，后参考文章（https://blog.youkuaiyun.com/esther_heesch/article/details/51340730）加上了vertical-align:text-top属性后，无文字的块就变成了绿色块的样子，下沉了，与前面的文字也就对...
react的html中用map循环生成div设置display:inline-block不生效
最新发布
11-05
在React中，如果你使用`map()`函数遍历数组并尝试将每个元素包裹在`<div>`标签内，同时设置`display: inline-block;`样式，有时候可能会遇到样式未生效的情况。这通常有以下几个原因： 1. **JSX语法错误**：确保你在`<div>`标签里正确引用了数组里的值，并且没有遗漏结束标签。 ```jsx {data.map(item => ( <div key={item.id} style={{ display: 'inline-block' }}> {item.content} </div> ))} ``` 2. **CSS优先级**：如果页面上还有其他更高优先级的CSS规则覆盖了`inline-block`，你需要调整这部分样式或者使用`!important`声明，但这应该尽量避免，因为它破坏了组件的可维护性。 3. **浏览器兼容性**：`inline-block`默认情况下可能会有一些浏览器兼容性问题，特别是处理元素间的间距和行高。确保在所有目标浏览器上进行了充分测试。 4. **状态更新**：如果你通过`state`动态改变`style`，记得在`componentDidUpdate`或`useEffect`钩子中更新DOM，而不是直接操作样式。 5. **纯函数问题**：在函数式组件中，如果`map`返回的是一个新的数组，React不会自动更新视图，需要你自己手动触发渲染，例如`setState()`。 如果以上都不是问题，你可以检查一下浏览器开发者工具中的样式是否被应用到对应元素上了，或者尝试在控制台运行对应的样式设置，确认它们是否起作用。如果依然困扰，提供具体的代码片段会更有助于找到问题所在。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值