行内块元素display:inline-block

最新推荐文章于 2022-03-29 15:25:19 发布
原创 最新推荐文章于 2022-03-29 15:25:19 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#inline #行内块元素

本文探讨了CSS中a标签作为内联元素的特点及限制，并介绍了如何通过display:inline-block属性将其转换为内联块状元素，从而实现宽度设置且保持在同一行显示的技术细节。

举例：
< a > 标签1< /a>< a >标签2< /a>< a >标签3< /a >
a标签本来就是内联
这样写，他出来效果就是——–标签1标签2标签3
但如果你想要定义宽度,不加块状是起不来作用的，但是单单设置为块状（display:block），他又换行了，所以这时加display:inline-block 就起到很大作用，内联块状，宽度既能实现，又能不换行…
a{width:100px; display:inline-block}

有时候解决ie6双倍像素撑开，display:inline不够用，也会用到这个属性
内联元素无法设置宽和高，inline-block后就可以了。

常用的块级元素（block）、行内元素（inline）以及行内块元素（inline-block）的解析
hchhan的博客
08-20 1478
转载自：https://blog.youkuaiyun.com/cc18868876837/article/details/78060347 一.块级元素： 不废话，直接上图（div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等） 从浏览器的...
CSS属性display:inline-block用法深入理解
09-25
对于块级元素，直接设置`display:inline-block`无法达到预期效果，因为它们已经是行内布局。要让IE支持`inline-block`效果，有以下两种常见的解决方案： 1. 使用双`display`属性技巧：先设置`display:inline-block`...
CSS：display:inline-block(行内块)的深入理解
twosecond
06-24 1116
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，大都会对这一属性感觉很模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很遗憾，最流行的 IE
display : block display :inline display: inline-block 的作用
a520songhai的博客
06-17 430
display: block display是控件的css属性之一，表示的是显示模式。none表示不显示在网页上，但是代码存在；bolck是此元素将显示为块级元素，此元素前后会带有换行符。 在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，...
常用的块级元素（block）、行内元素（inline）以及行内块元素（inline-block）
weixin_43312083的博客
08-27 449
https://blog.youkuaiyun.com/cc18868876837/article/details/78060347 https://blog.youkuaiyun.com/R_banyan0820/article/details/80976114 https://blog.youkuaiyun.com/hsd2012/article/details/51009747 以上三个链接均为相关链接 ...
display块级元素
小元子
12-17 559
display:inline; 内联元素，简单来说就是在同一行显示。 display:block; 块级元素，简单来说就是就是有换行，会换到第二行。 display:inline-block; 就是在同一行内的块级元素。
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
在CSS布局中，`display: inline-block` 是一个常用的属性，它允许元素以行内元素的方式排列，同时具有块级元素的部分特性，如指定宽度和高度。然而，使用`display: inline-block` 时，元素之间往往会出现一些...
display:inline-block的原理分析
12-13
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。 复制代码代码如下: display:inline-block 将对象...
理解display:inline、block、inline-block
aiguke3395的博客
03-17 240
要理解display:inline、block、inline-block的区别，需要先了解HTML中的块级（block）元素和行级（inline）元素的特点，行内元素也叫内联元素。 块级元素 总是另起一行开始；高度，行高以及顶、底边距都可以控制；宽度缺省是它所在容器的100%，除非设定一个宽度。块级元素通常作为其他元素的容器，可以容纳内联元素和其他块元素。block ...
块元素、内联元素、inline-block
weixin_30677073的博客
03-19 95
块元素的特征： 　　1、默认独占一行， 　　2、没有宽度时候，默认撑满一行 　　3、支持所有CSS命令 内联元素 　　1、同排可以继续跟同类的标签； 　　 2、内容撑开宽度 　　 3、不支持宽高 　　4、不支持上线margin 　　5、代码换行被解析 Inline-block 　　1、块在一行显示 　　 2、行内属性标签支持宽高 　　3、没有宽度的时候内容撑...
使用display:inline-block；属性转化的行内块的缺点及解决方法
flydrem
02-22 713
使用display:inline-block;属性转化的行内块的缺点及解决方法 缺点 多个相邻行内块之间有间隙（空隙产生的原因：当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符，如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化） 里面的文本行数不一致时会出现盒子塌陷 取消盒子间隙的方法 删除标签之间的空白（有效果但是不建议使用，代码看起来不太规范，一般不使用） 给转化显示模式为行内块的盒子添加margin-left: -10px;，取负值，可以把间隙
block块级元素、inline行内元素和inline-block盒模型
qq_35768238的博客
04-18 1443
一、block的特点       ① 总在新的一行开始（换行）       ② 行高以及顶和底边距离都可控制       ③ 如果用户不设置宽度，则会默认为整个容器的100%，设置就按设置的值显示       ④ 常用的块元素：&lt;div&gt;&lt;p&gt;&lt;h1&gt;&lt;from&gt;&lt;ul&gt;&lt;li&gt;等a{ width: 100px; ...
display:inline、block、inline-block的作用以及块级元素的特点。
kaka2Ting的博客
08-01 681
 一：display:block; :将元素设为块级元素。 block块级元素的特点： ①总是在新行上开始。 ②高度，行高以及顶和底边距都可控制； ③宽度缺省，则是它的容器的100%，除非设定一个宽度。 常用的块级元素：&lt;div&gt;, &lt;p&gt;, &lt;h1&gt;, &lt;form&gt;, &lt;ul&gt; 和 &lt;li&gt;。 二：display:...
CSS行内元素和块元素的区别及display属性
yen_zz的博客
03-29 766
1.行内元素和块元素的区别 内联元素(行内元素) <span>、<a>、<img/>、<strong>、<em>、<i> 块级元素 <h1>…<h6>、<p>、<div>、列表 内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立 块元素会独占一行，其宽度自动填满其父元素宽度 行内元素不会独占一行，相邻的行内元素会排列在同一行里直到一行排不下，才会换行，其宽度随元.
关于 display:inline-block
JINisSun
01-30 700
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)  inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 i
display：inline-block的特点和作用
a4228492的博客
02-14 629
转载于:https://www.cnblogs.com/konglxblog/p/10374526.html
关于块状元素设置display：inline-block的总结
weixin_30410119的博客
11-20 289
块状元素（display：block），独占一行，可以设置weight和height 内联元素（display：inline），不可设置weight和height，元素宽度为元素内容（包括文字和图片等）的宽度 在ie6/7中display：inline-block有bug，网上给出的两种方法—— 　　1）div{display：inline-block} 　　div{displa...
子元素display: inline-block导致元素塌陷
最新发布
02-21
### 子元素 `display: inline-block` 导致父级元素高度塌陷的解决方案 当子元素使用 `display: inline-block` 属性时，可能会遇到父级元素的高度无法自动适应子元素的情况。这通常是因为默认情况下，行内块状元素不会触发其父容器的高度自适应调整。 #### 使用伪类清除浮动影响 一种常见的方式是通过引入额外标记来清理内部流的影响： ```css .parent::after { content: ""; display: block; clear: both; } ``` 这种方法适用于存在浮动的情况下，但对于纯 `inline-block` 布局来说可能不是最理想的方案[^1]。 #### 设置父元素字体大小为零并恢复 由于 `inline-block` 元素间会因为空格或换行符而产生间隙，可以通过暂时将父元素的字体尺寸设为0来消除这些不必要的间距，再利用后代选择器重新定义实际文本节点所需的字号： ```css .parent { font-size: 0; /* 移除空白字符 */ } .parent > * { font-size: initial; /* 还原正常文字大小 */ } ``` 此技巧有效解决了由HTML源码中的空格所引起的视觉缝隙问题[^2]。 #### 应用表格显示模式 指定父容器采用表格式渲染模型能够很好地处理这种情况，并且具有良好的跨浏览器一致性支持： ```css .parent { display: table; word-spacing: -1em; /* 调整单词间距以弥补潜在溢出 */ } ``` 上述配置不仅修正了布局上的缺陷，还增强了页面结构语义化程度[^3]。 #### 给定具体宽度和盒模型参数 对于特定场景下，精确控制各子项的比例分配也是可行的办法之一： ```css .pond-header span { display: inline-block; text-align: center; width: 21%; padding-right: 1%; } .pond-header span:nth-child(1) { width: 20%; } .pond-header span:nth-child(3), .pond-header span:nth-child(5){ width: 17%; } .pond-header span:nth-child(5) { padding-right: 0; } ``` 这种方式通过对各个子组件进行细致规划从而达到预期效果[^4]。 综上所述，在面对 `inline-block` 所带来的父层高度丢失难题时，可以根据实际情况选用以上任意一种或者组合多种策略来进行优化改进。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值