为什么display:line-block的a标签会加上文字之后会向下移动呢？

最新推荐文章于 2024-07-24 20:00:00 发布
转载 最新推荐文章于 2024-07-24 20:00:00 发布 · 958 阅读 · 1
文章标签：

#displayinline-block

本文探讨了inline-block元素默认的基线对齐问题，并提供了解决方案：通过添加内容或使用空格来调整对齐方式，同时介绍了如何利用vertical-align属性将对齐方式改为顶部。

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

5774f2080001a9f604350362.jpg

5774f2080001b0ee05000282.jpg

5774f2090001d05a05000352.jpg

5774f2090001233405000302.jpg

1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐，对齐的是第一个元素里面字的下划线，所以第二个元素的下边缘对齐的是1的下划线，只要在第二个元素里面加内容或者加个空格( )就可以了。个人认为inline-block和inline性质一样，只是一个可以设置宽高一个不可以。


2.inline-block的默认对齐方式的问题

inline-block默认对齐方式是底部对齐

加一个vertical-align:top; 属性

把垂直对齐方式改为顶部就好了

easy868
关注
css笔记2：复合选择器、display、line-height、background、css的三大特性、注释
小黄呀呀呀的博客
04-23 257
1. CSS复合选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。 目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 1.1 后代选择器（重点）中间用空格，子孙后代 概念： 后代选择器又称为包含选择器 作用： 用来选择元素或元素组的子...
CSS知识点总结之——display:inline-block
tang_1227的博客
01-25 744
CSS知识点总结之——display:inline-block 如果我们想让两个div能够在一行显示，一般有下面两种方法：   1. 为两个div均添加display:line-block属性；  2. 将两个div都设成浮动的元素 ； 但是这两种方法在实现时是有一定差别的： 原始代码如下： Document *
web前端之css中display属性，display:inline-block
过客匆匆，恍如烟
11-12 6178
display属性，display:inline-block display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身
CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐
qq_43625134的博客
05-17 1958
CSS 布局 - display: inline-block display: inline-block 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。 同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。 与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他
display:inline inline-block block
zzzley的博客
11-24 1024
display：block，inline，inline-block
IE6中a标签同时使用inline-block与text-indent时出现的BUG
09-25
问题在于，当`<a>`标签包含文本并设置了`text-indent`为负值以隐藏文本时，IE6会错误地处理`inline-block`元素的位置。在其他现代浏览器如Chrome中，这种做法可以正常工作，但在IE6中，元素的背景会向左移动，导致...
<!-- 表格处理（增强版） --> <xsl:template match="w:tbl"> <fo:table table-layout="fixed" width="100%" border-collapse="collapse"> <xsl:for-each select="w:tblGrid/w:gridCol"> <fo:table-column column-width="{@w:w div 20}pt"/> </xsl:for-each> <fo:table-body> <xsl:apply-templates select="w:tr"/> </fo:table-body> </fo:table> </xsl:template> <!-- 表格行（过滤被合并单元格） --> <xsl:template match="w:tr"> <fo:table-row> <!-- 精确过滤被合并单元格：跳过所有标记为continue的单元格 --> <xsl:apply-templates select="w:tc[not(w:tcPr/w:vMerge/@w:val='continue')]"/> </fo:table-row> </xsl:template> <!-- 单元格模板（完整版） --> <xsl:template match="w:tc"> <fo:table-cell border="1pt solid black" padding="2pt" display-align="center"> <!-- 处理列合并 --> <xsl:if test="w:tcPr/w:gridSpan"> <xsl:attribute name="number-columns-spanned"> <xsl:value-of select="w:tcPr/w:gridSpan/@w:val"/> </xsl:attribute> </xsl:if> <!-- 处理行合并 --> <xsl:if test="w:tcPr/w:vMerge[@w:val='restart']"> <!-- 计算实际跨行数 = 下方连续标记为continue的单元格数 + 1 --> <xsl:variable name="rowSpan"> <xsl:value-of select="count(following::w:tr/w:tc[1][w:tcPr/w:vMerge/@w:val='continue']) + 1"/> </xsl:variable> <xsl:attribute name="number-rows-spanned"> <xsl:value-of select="$rowSpan"/> </xsl:attribute> </xsl:if> <fo:block linefeed-treatment="ignore" white-space-collapse="true"> <xsl:apply-templates select=".//w:p"/> </fo:block> </fo:table-cell> </xsl:template>我这个提示The column-number or number of cells in the row overflows the number of fo:table-columns specified for the table. (See position 1:9340)，请直接给出修改后的整体代码
03-08
例如，如果一个单元格跨2列，则下一个单元格的位置应该向后移动2列，而不是1列。但XSL-FO的number-columns-spanned属性会自动处理这一点，因此可能不需要手动调整，但需要确保列定义足够。 可能的问题在于，当存在...
/* 媒体查询 - 手机端样式 */ @media (max-width: 768px) { /* 隐藏默认的导航链接 */ .nav-links { display: none; flex-direction: column; /* 竖排布局 */ align-items: center; /* 内容水平居中 */ justify-content: center; /* 内容垂直居中 */ width: 100%; margin-top: 1rem; background-color: #002B49; /* 背景颜色与 navbar 一致 */ } .nav-links.active { display: flex; /* 显示导航链接 */ } .nav-links li { margin: 1rem 0; /* 上下间距 */ width: 100%; /* 占据整行宽度 */ text-align: left; /* 文字左对齐 */ } .nav-links a { color: white; /* 字体颜色为白色 */ padding: 0.5rem 1rem; /* 添加一些内边距 */ display: block; /* 让链接占据整个容器宽高 */ } .nav-links a:hover { background-color: #3498db; /* 悬停时背景变色 */ color: white; /* 悬停文字仍为白色 */ } /* 面包菜单按钮样式 */ .menu-toggle { font-size: 1.5rem; /* 设置字体大小 */ cursor: pointer; /* 改变鼠标悬停状态 */ display: inline-block; /* 展示出来 */ } } /* 默认隐藏面包菜单下的内容 */ .menu-toggle { display: none; /* 在大屏幕设备上隐藏 */ } /* 当屏幕小于等于768px时显示面包菜单 */ @media (max-width: 768px) { .menu-toggle { display: block; /* 小屏设备显示面包菜单 */ } }为什么加了这段代码，点击面包菜单时还是不可以看到导航栏在面包菜单显示竖向排列
最新发布
03-27
打开开发者工具(F12)，模拟小屏幕模式，查看当`.nav-links`被加上`active`类之后是否会应用相应的display属性变为flex，并且方向设置成了column形式。如果没有变化，试着提高该段落的选择权重，例如： ```css .nav-...
外层元素block，高为60px，里层三个元素都设置inline-block，设置高为100%，为什么里层第一个元素贴外元素边，另外两个子元素，向下偏移了
03-08
为什么会这样呢？ 首先，我需要回忆一下inline-block元素的特性。inline-block元素会按照基线对齐，也就是vertical-align的默认值是baseline。这可能和问题有关。当子元素的高度都是100%时，它们的高度应该和外层...
display: inline-block； 是什么意思？
m0_72231179的博客
07-24 1288
display: inline-block; 是什么？及display 的使用方法
display:inline-block;的神奇用法
某年某月某条街
08-23 6625
浮动布局就是指通过使用float属性，让列表元素依次排列的布局。浮动局部的局限性，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐...
CSS display设置inline-block之后盒子整个下移
LlanyW的专栏
02-27 675
div中不添加文字是这样的： 但是在div中添加了文字之后，就会偏移位置，像下面这样： 造成这样的原因是因为给div设置了inline-block的原因 解决办法就是再给这几个div添加一个属性。出来效果，后面2个div加了东西之后不对齐了,本来是希望他们都先靠上对齐的。
#css中inline-block出现下移的情况
weixin_44000173的博客
05-01 968
css中inline-block出现下移的情况 解决方案：设置vertical-align:top 在包裹层里嵌套的两个div设置display: inline-block时，正常情况下两个div会并排显示，如图 但是如果在其中一个div里面加上一些内容，神奇的事发生了，第一个div出现了下移，如图： 查阅了相关资料发现，在将元素display设置为inline-block的时候，元素即同时具有内联元素和块级元素的属性，既排列在同一行又可以设置宽高。 对于内联元素，都具有vertical-align属性，
display:line-block的标签有文字的下移问题
lotte
08-02 1518
效果如图 &lt;span class="a"&gt;1&lt;/span&gt; &lt;span class="gray"&gt;&lt;/span&gt; &lt;span class="red"&gt;1&lt;/span&gt; span{ display: inline-block;width: 200px;height:
display为inline-block的元素有内容和没有内容情况下高度不一致的问题
weixin_34226182的博客
07-24 400
这两天发现一个问题，就是display为inline-block的元素有内容和没有内容情况下高度不一致，虽然不会出现元素中没内容的情况，但是我还是决定必须解决这个问题，可能我有一些轻微的强迫症。 <div id="frame"> <div class="item">test</div> <div class="i...
解决div inline-block 加内容后出现偏移
yuxiaoc的博客
08-14 673
<div class="con"> <div class="colorDiv">xxx</div> <div class="color"></div> </div> 加了xxx 出现了div 向下偏移 原因： inline-block 默认属性 vertical-align：baseline 基线对齐 改为 top即可 <style> .con { marg.
使用inline-block时产生的元素上下偏移的问题
weixin_42963591的博客
12-10 3464
起因 原本想使用display: inline-block让这三块元素在水平方向上对齐，但是原本好好的，但是最左侧的元素，里面加了内容之后，就产生了如图所示的问题，元素之间上下偏移了。 解决办法 查了不少文章，最终查明了问题的原因所在。是因为虽然设置了display: inline-block，但是三个行内块元素的基准线没有对齐，所以导致如图第一个元素下沉的问题。 解决办法如下： 1. vert...
display:line-block;标签四周间隔的处理方法
zbslong的博客
04-25 5832
display:line-block;标签是个好东西，在有多个同级display:line-block;标签时，可以实现自动换行。但是可恨的是，四周总是有非margin、padding、left、top、right、bottom属性的空白空间。网上有很多解决办法，但是没有找到只用CSS就可以解决的办法，今天突发奇想竟然成功了。（写完才发现14年就有解决的文章了，为毛17年我没有找到，我那通找啊死的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值