使用display：inline-block后出现行内块元素高度不对齐的问题

原创 于 2022-11-21 19:57:21 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

本文探讨了如何使用CSS的vertical-align属性来实现行内块元素的顶部、底部或基线对齐，这是一种有效的布局调整手段。

可能是因为作为行内块元素的盒子 高度宽度都由内容决定 因此考虑用vertical-align：top/bottom/baseline解决

webdowhatIlike
关注
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
display:inline-block的实际应用
03-17
当一个元素设置为 `display:inline-block` 时，它会像内联元素那样在同一行内排列，但同时也保留了块级元素的宽度、高度以及垂直对齐的能力。这使得开发者能够在不使用浮动（float）或者创建复杂的表格布局的情况下...
解决用display:inline-block导致高度不一致问题
cooker_666的博客
11-30 5817
设置9宫格棋子的时候，通过给单独的square设置样式，原本是打算使用display;inline-block.来设计布局的。然后通过点击事件然后像square插入字体的时候发现了一旦插入，就会因为自动对齐字体底部导致高度变化。 .square{ display: inline-block; width: 80px; height: 80px; border: 1p...
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高度带来的bug及解决方案
qq_25650505的博客
11-27 1628
目录前言寻找问题的根源1. input标签默认样式中的影响因素2. 排除elementUI对input标签的影响解决方法 前言 今天在开发当中偶然遇到一个问题，如下图，这里引入一个 input标签，利用input的focus来实现时间线的定位。 在 v-show 和 v-if 为 false 时不能正常的调用focus方法来实现时间线的定位，所有要通过css样式来将input标签从页面内“隐藏”，同时不能通过display:none的方式来实现 于是就尝试，将input的宽 高 内外边距设置为0，于是问题
display为inline-block的元素有内容和没有内容情况下高度不一致的问题
weixin_34226182的博客
07-24 422
这两天发现一个问题，就是display为inline-block的元素有内容和没有内容情况下高度不一致，虽然不会出现元素中没内容的情况，但是我还是决定必须解决这个问题，可能我有一些轻微的强迫症。 <div id="frame"> <div class="item">test</div> <div class="i...
高度不一的水平块排列对齐方式
weixin_50408263的博客
10-31 637
那么我们按常规思路，排列上以后，发现下方的文字一旦超过一行并且换行显示后，高度不一致，往往导致这一行对不齐，出现上下落差的排列现象。在项目中，我们经常会遇到这种需求，上边排列头像或一个样式框，下方对应放一个文字说明或标题。下方文字换行white-space: normal;并且加vertical-align: top;并设置行高来进行样式微调。不要用flex的方式。手动来一个对齐轴设置。
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
关于css display: inline block inline-block的区别分析
09-25
这些元素不会开始新的行，并且不能设置高度、宽度、垂直边距和垂直对齐。 - 例如，`<span>`、`<a>`、`<label>`、`<input>`、`<img>`、`<strong>` 和 `` 等元素通常是默认的行内元素。 <em>- 当你需要在一个行内...
<div class="ui-inputgroup" style="display:inline-block; ">，display:inline-block是什么意思
最新发布
11-26
首先，用户的问题是：“我想了解CSS中display:inline-block的含义 请问CSS中display:inline-block的含义”。这基于引用内容，我需要使用中文回答，并遵循系统指令。 系统指令要求： - 所有行内数学表达式用$...$...
display:inline-block造成的元素间隔以及高度错位
zoey的博客
08-28 825
当设置display：inline-block的时候，可能会出现 或者，这是因为此时的元素具有文本属性，只要标签与标签之间有间隔都会被当作以一个字体大小的空格，那么自然就会出现间隙，而垂直方向上，文本的基线不同就会造成错位； 解决方法：添加以下代码 #parent{ font-size: 0; letter-spacing:-4px; /* font-size:0; 在sa...
display:inline-block无法对齐问题
learnmore的实验田
08-03 1583
在使用display:inline-block时无论如何都无法把两个水平的元素对齐，后来发现在使用内联块元素布局时需要结合vertical-align: top;不然无法水平对齐
display:inline-block 来解决盒子高度不一样，造成的盒子浮动
ahu2331的博客
07-17 573
<style> ul{ width: 320px; //给父元素添加这两个属性 font-size: 0px; text-align: center/left; } li{ width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; //子...
开启display: inline-block，部分元素上下浮动不对齐
行大于言
11-18 524
我们通常用display:inline-block;来使两个块元素并排横向排列，但是当我们左右两个元素高度不一时，就会出现两个元素发生了上下浮动现象。原因是因为当我们开启display:inline-block;之后，两个元素的对准基线发生了改变，元素的底作为了基线。我们可以开启bfc打破这个规则，也可以直接改变基线对准规则来解决这个问题。 ...
DIV 设置 display：inline-block 导致 DIV 对不齐的解决方法
热门推荐
ForeverCjl的专栏
11-21 1万+
情景代码如上。 出问题的浏览器： 360，sogou，猎豹的极速模式 给DIV设置display：inline-block属性后，这四个DIV会拍在一排，但是会个别的高一点，不对齐。 解决方法： 给div设置vertical-align：top vertical-align：top"> vertical-align：top"> vertical-align：top"> ver
css设置了inline-block后面元素不对齐
WMW_wmw的博客
10-14 421
两个一起写上就不会有问题了 display: inline-block; vertical-align: top;
解决对img等元素进行行内快转换display inline-block上下对不齐问题
qq_40239859的博客
11-29 1055
 在对多个img等元素进行行内快转换时，容易出现第一个与第二个img元素高度出现错位的情况。以前我一直没有找到缘由，后来就放弃了，直接用float:left浮动来满足项目的实际要求。在一个偶然机会下发现了vertical-align： top，将这个直接添加在需要转行内快的css下面，错位就消失了。  ...
【前端】inline-block元素上浮无法对齐的解决办法
Bryant_2324的博客
02-02 780
元素设置为display:inline-block;后，部分元素出现了上浮，无法与其他同行元素水平对齐。 部分代码如下：  class="wrap">  class="a">iyaxi.com  class="a">雅兮网  class="a">iyaxi.com  class="a">雅兮网 css部分  type="text/css"> *{border: 0;padding:
行内块元素没有对齐
weixin_54134903的博客
05-17 923
同一DIV内，两个行内块元素不对齐 将div都设为inline-block行内块元素 .main-cont>div{ display: inline-block; margin-top: 10px; } 问题：运行后的效果，两个div没有对齐 原因：这个跟基线对齐有关系，inline-block的基线是正常流中最后一个line box的基线 解决方法：修改基线不同div的对齐方式：vertical-align: ;可根据自己的调整 .industryList-box {
CSS深度解析：display:inline-block属性及空隙问题解决方案
在CSS布局中，`display:inline-block`属性是一个非常重要的概念，它结合了`display:block`和`display:inline`的特点，允许元素既能像块级元素一样设置宽高，又能像内联元素一样在同一行内排列。这种特性在创建复杂...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值