解决设置display:inline-block后不对齐问题

最新推荐文章于 2024-02-26 14:34:55 发布
最新推荐文章于 2024-02-26 14:34:55 发布
阅读量942 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/dyy-dida/p/9100903.html
本文介绍了解决使用inline-block布局时下方出现空白的方法：通过设置vertical-align:bottom;或vertical-align:top;来调整元素垂直对齐方式。

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

使用inline-block后，该标签下方出现一片空白，使用vertical-align: bottom; 或者vertical-align:top;就可以了。

转载于:https://www.cnblogs.com/dyy-dida/p/9100903.html

display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
有关display:inline-block在FF出现空白的解决方案
03-17
这个问题在标题“有关display:inline-block在FF出现空白的解决方案”中被提及。 首先，我们要理解为什么会出现这样的现象。当使用`display:inline-block`时，元素会像内联元素那样排列，但是它们仍然保留了块级元素...
CSS 元素设置display: inline-block；出现不对齐情况解决方法
EastRiseJi的博客
10-13 2392
事情是这样的： 为了使页面看起来比较整齐，我限制了书名的长度并添加title显示。发现我将中间书名设置成"display:inline-block;"后，书名位置偏上显示了（如下图）。 <style> .box { } .book-name-box { display: inline-block; min-width: 200px; text-align: right; } .mid { ...
display inline-block 后不对齐的解决办法
TSORA-C的博客
11-25 1225
<h1 id="displayinline-block后不对齐的解决办法">display:inline-block;后不对齐的解决办法</h1> <p>解决办法</p> <ul> <li>verti
display：inline-block元素上下不对齐
tcllxxl的博客
04-02 504
行内元素对齐：display-inline-block
cangdu的专栏
01-04 4348
问题描述 两个div属性都是display：inline-block;但是一个有内容一个没有内容 为什么会出现高低不平的现象？ 看效果~ .div-3, .div-4 { display: inline-block; width: 100px; height: 50px; line-height: 50px; background: #003
display:inline-block 浮动时，头部无法对齐解决办法
Jesse
01-17 1697
在父类增加： vertical-align: top; 问题原因在于元素的内容不一致导致对齐的位置不一致，所以需要增加以上属性，目的是把元素的顶端于行中最高的元素的顶端对齐~
CSS属性display:inline-block用法深入理解
09-25
早期版本的Firefox不完全支持此属性，而是使用其私有属性`-moz-inline-box`，但这个属性存在一些问题，比如可能导致文本对齐问题，需要使用`-moz-box-align`来解决。由于这些限制和潜在的兼容性问题，通常建议避免...
使用display:inline-block居中没有宽度的元素
09-25
"使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念：`text-align`属性和`display`属性的`inline-block`值，它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...
行内块元素没有对齐
weixin_54134903的博客
05-17 894
同一DIV内，两个行内块元素不对齐 将div都设为inline-block行内块元素 .main-cont>div{ display: inline-block; margin-top: 10px; } 问题：运行后的效果，两个div没有对齐 原因：这个跟基线对齐有关系，inline-block的基线是正常流中最后一个line box的基线 解决方法：修改基线不同div的对齐方式：vertical-align: ;可根据自己的调整 .industryList-box {
解决 display:inline-block 左右间距问题 & 上下不对齐问题
BigOrange的博客
08-02 2877
一 、左右间距问题.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元素上浮无法对齐的解决办法
qq_45530512的博客
12-13 322
inline-block元素上浮无法对齐的解决办法
解决设置inline-block后不对齐问题。
热门推荐
天下大师傅
08-07 1万+
直接切入主题，添加vertical-align: top;就可以解决了。 附赠另一个问题 使用span标签或者a标签写按钮时，会发现写了一大堆，width和height无论怎样设置都没有宽高，其实只要加上display: inline-block; 或者 display: block; 这是因为span和a都是内联标签，无法设置宽高。要变成块级标签设置的宽高才能使用。
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
解决： 排列inline-block元素出现顶部不对齐的问题
Ada Yan
12-22 1835
最近在写有关响应式布局的样式，当用inline-block横向排列li元素时，出现了一个奇怪的问题，就是横向排列的元素上部没有对齐。查找了好多原因，最终在stackoverflow上搜到一篇相关解答，与大家分享下。   问题原链接：http://stackoverflow.com/questions/1885873/vertical-alignment-of-empty-inline-block
关于display:inline-block布局导致错位问题分析
weixin_33937913的博客
05-27 276
移动端设计稿需求是这样的，如下图: 未知的几个头像从左至右并行居中排列。 一般可能直接使用float，但是设计图要求头像排列始终是居中的，于是想到要让它们成为行内元素,然后可使用的方法有flex box,inline-block； 因为是在移动端，于是使用flex box: .user-list { margin: 20px auto;display:-webkit-...
28.inline-block使用，缝隙，对齐
qq_36367494的博客
02-18 1343
1.display:inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。  2.为什么产生水平空隙：inline 元素会产生空隙，block 元素不会产生空隙。看看 inline 元...
CSS样式问题之display:inlink-block；后最后一个元素与前面的元素不能对齐
最新发布
Cocoon_Xu的博客
02-26 463
如图两列图标我使用的是将每个块元素display:inlink-block，实现了在固定宽度里两个块元素占一行，这样比写多行要方便很多，也不用使用float带来的更多烦恼。但就是出现了一个问题，就是前面几行效果都不错，就是最后一个元素不对齐。原因是两个并列的inline-block默认是基线对齐的，可通过设置。在项目实践中总有些奇怪的样式问题让人头疼，总觉得代码没什么问题，但效果就是不理想，我这些天就遇到两个头疼的问题，原因查找了很久，解决之后又觉得这么简单，时间都浪费了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值