display:inline是什么意思？-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

display:inline的意思是设置对象做为行内元素显示，inline是内联对象的默认值，而一般用的div是块级元素，默认display属性是block，但将div的display设置为inline的话，则多个div显示在一行。

display:inline的意思是：

设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span）而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以像span一样显示在一行了。

它可以让行内显示为块的元素，变为行内显示，例如

<div> DIV1 </div>
  
<div> DIV2 </div>

这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了

<div style= "display:inline "> DIV1 </div>
  
<div style= "display:inline "> DIV2 </div>

DIV1和DIV2这时候显示在同一行了，试试看吧。

和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了

<span style= "display:block "> SPAN1 </span>
  
<span style= "display:block "> SPAN2 </span>

推荐教程：《css教程》

以上就是display:inline是什么意思？的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者