关于display: inline-block;加了文字与不加文字框架对不齐的问题解决

最新推荐文章于 2021-04-20 09:41:26 发布
最新推荐文章于 2021-04-20 09:41:26 发布
阅读量916 收藏
点赞数

当写了三个<i>标签，红色的标签加了文字，黄色的没有加文字，明显两个框上下不一致，感觉加了文字后块会下沉，

不管调内边距和外边距都不管用，后参考文章（https://blog.csdn.net/esther_heesch/article/details/51340730）

加上了vertical-align:text-top属性后，无文字的块就变成了绿色块的样子，下沉了，与前面的文字也就对齐了

lth1156187401
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案
NeiHan2020的博客
12-15 712
前言 行内元素：指在同一行内不自动换行，可以和其他行内元素在同一水平的元素 行内元素设置宽高：行内元素想要设置宽高，需要用display：inline-block设置（详解如下表）。 display值 作用 display:block 设置元素为块级元素（块级元素独占一行，可以设置宽高） display:inline 设置元素为行内元素（行内在一行排列，不可以设置宽高） display：inline-block 设置元
“display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法
热门推荐
wangshengfei
05-07 1万+
在开始用display：inline-block的时候，只知道有baseline这么一说，而且当时记笔记解决了空隙问题，百度一堆文章，什么终极解决办法等等，还记录了一些问题，当时不明白，到今天才明白verticle-align的用法，原来可以这么用，以后可以随便玩inline-block，还有CSS hack，还有UC浏览器，这几天写的进哥的嘿凤梨首页在手机UC直接换行了，可能是间隙问题。。。bu
父级div子级span给子级一个display: inline-block 为什么不在一行显示，解决方法：
MQH000000000的博客
04-20 1098
最近做一个移动端的项目遇到一个问题，一行5个span标签，每个设为 inline-block，并分为不同的百分比显示在一行内，但是不知什么原因出现了换行现象，一度怀疑是百分比超了100%，但是检查后没查出问题，查找了一些资料发现问题出现在 inline-block上，inline-block是包含空格、换行符的，所以种种原因会导致inline-block产生间距，即会出现换行。 清楚inline-block的间距有很多方法，最简单的就是格式化代码或所以inline-block的标签写在一行无空...
display:inline-block解决文字有间隙问题
wyw223的博客
04-20 108
display:inline-block解决文字有间隙问题 定义：display:inline-block是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内联元素的增强。 但是display:inline-block存在文字间隙问题 &lt;div class="container"&gt;       &lt;d...
span设为inline-block之后，未包含文字时下面会多出一条空白问题
Travelling1006的专栏
01-27 294
1.问题的引出： 产品列表页面场景： 上面是产品图片【img】， 中间是提示库存信息【span】（始终存在，有库存则不显示文字，但元素占位。所以设置display:inline-block）， 下面是产品名称【div】。 效果如下： 我们发现，没有文字的时候，span元素下方会多一条空白。 将display设置为block，则不会出现此问题。 2.问题的解决： sp...
div添加display: inline-block;后添加文字盒子位置发生改变
qq_41643226的博客
03-23 2672
学习记录： 在实际开发中遇到一个问题，display: inline-block;的div在其中添加文字或者其他元素都会导致盒子位置发生改变，我上网搜了一下，查到了解决方案，给inline-block的元素添加一个属性：vertical-align:middle（不知道原因）就解决了 ...
关于layui的动态图标不显示的解决方法
10-16
在开发Web应用时，我们经常会使用到图标库来增强页面的视觉表现力。layui是一款流行的前端框架，它提供了丰富的图标资源以及...同时，熟悉layui的文档和社区资源也是解决问题的关键，因为那里有丰富的示例和经验分享。
michael-mott.github.io:网站-目前正在进行中
03-18
例如，`color`属性可以改变文字颜色，`font-size`设置字体大小，`margin`和`padding`调整元素间的距离，`display`属性用于控制元素的显示方式，如`block`或`inline`。 【GitHub Pages】 "michael-mott.github.io"的...
sws-display
03-26
6. **Inline-block**：`display: inline-block`结合了`block`和`inline`的特点，元素保持块级特性，但可以与其他元素并排显示。 7. **Table Display Types**：`display: table`、`table-cell`和`table-row`等可以...
jquery放大缩小文字导航
06-05
display: inline-block; margin-right: 10px; } ul.nav li a { color: #333; font-size: 16px; transition: font-size 0.5s; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...
Smart-Dresser:2020年-第2个学期的顶点设计（不包括深度学习代码）
04-09
例如，可以使用`display`属性调整元素的显示方式（如`block`、`inline`、`flex`或`grid`），`float`属性实现流式布局，以及`position`属性设置绝对或相对定位。 2. **响应式设计**：在Smart-Dresser项目中，可能...
解决设置inline-block后不对齐问题。
天下大师傅
08-07 1万+
直接切入主题，添加vertical-align: top;就可以解决了。 附赠另一个问题 使用span标签或者a标签写按钮时，会发现写了一大堆，width和height无论怎样设置都没有宽高，其实只要加上display: inline-block; 或者 display: block; 这是因为span和a都是内联标签，无法设置宽高。要变成块级标签设置的宽高才能使用。
“设置display:block-inline的li或div中添加文字后，导致li或div排版掉落、错位”的原因及解决方法
titoni_yunruohan的博客
11-25 3921
 情景    在了解可以通过设置display：inline-block会将块级元素拥有inline元素一行排列的特性，那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列，这时候你可能说通过设置浮动float就可以解决，不着急，float的原理和实现作为补充内容会接着聊，那么接下来先通过效果图来看一下问题所在 代码展示（通过设置display将li...
html使用display:inline-block实现标签右对齐，值左对齐效果。和设置div宽度，并居中显示。嵌套div的里层div文字居中显示
小爷欣欣
11-29 1万+
要实现下图所示的效果： 代码： $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); key1rrr value1 22 key1rrrrrr value1gggg key1rrrfff valufffe1 key1rrr value
inline-block对齐，设置inline-block元素内容不同位置相互影响原因
水荷的博客
11-14 7102
对两个并列元素设置了display: inline-block; 以为他们的位置是这个样子 结果确是这个样子： 我们来看一下这个div的界限 发现，左边图片贴在div的顶部，右边气泡并没有贴着div的顶部，解决方法： 给两个inline-block元素加上以下属性： vertical-align:top; 问题解决了，我们来思考为什么回出现这个问题，发现两个设置为inline-block的...
样式学习之如何让inline-block中的文字居中
weixin_30872867的博客
08-06 949
把文字内容封装在span标签中，当图片处理，设置其属性为：display：inline-block 不过遇到一个问题就是，当我设置span的高度的时候，那么这个居中效果就丧失了。有莫有： 转载于:https://www.cnblogs.com/DIGUO_F/archive/2012/08/06/2625906.html...
display:inline-block属性的标签出现的问题及解决方法
奋斗小强的博客
07-24 1万+
1，首先说明display:inline-block可以让块级元素并排显示，但是需要注意一些问题，如下； 1、有些标签是默认的inline-block属性，例如img 和input，这些标签称为行内块标签 1.对于img标签会出现白边问题，如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ch...
inline-block元素上浮无法对齐的解决办法
智欣约的博客
08-14 1万+
不得不说display:inline-block;是一个强大的css属性，它解决了很多float浮动布局的不足，让页面布局更随意、富有弹性。但这个改变了元素类型的属性也存在着很多容易让人忽视的小问题，如之前我有写过的《li标签间有空白是怎么回事? 消除li横排后空隙》，我们姑且称之为“bug”吧（实则不然），只有我们掌握了这些问题的解决办法，才能更加熟练的使用这一布局神器。 笔者这次遇到的一
CSS之使用display:inline-block来布局
weixin_30698527的博客
05-13 1万+
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margi...
请用 Express 框架实现如下功能:当单击上图中某本图书名称后，显示该图书详细信息，如下图所示: 左侧是封面图，右侧最上面是书名，有一条hr横线分割开来，下面是： 作者： 出版社： 淘书价格： 内容简介： bookInfo.html模板文件: <html lang="en"> <head> <title><%=title%></title> <link rel="stylesheet" type="text/css"href="/stylesheets/divBar.css"> <style type="text/css"> divbook/width:90%;margin:10px auto? divpictureffloat:left;text-align: center;width:20%:height:800px;position: relative;top: 20px)divinfofwidth: 80%;height:800px;padding-left: 50px;position: relative; top: 20px;)abookname/display: block:height: 30px:line-height: 30px:font-size: 20px:color: bluea.bookname:hoverftext-decoration: underline n: center; span.pricefdisplay: inline-block;height: 30px;line-height: 30px;font-size:20px;color: red;a.apfdisplay:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: bluespan.other(display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: blackspan.abstractfdisplay: block;font-size: 15px;color: black} </style> </head> <body> 补充这里的代码： </body>
最新发布
05-26
span.price {display: inline-block;height: 30px;line-height: 30px;font-size:20px;color: red;} a.ap {display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: blue;} span.other {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值