2022-03-18 529
在77ISP学技术
每日笔记,CSS 布局 - display: inline-block
与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度。
同样,如果设置了 display: inline-block,将保留上下外边距/内边距,而 display: inline 则不会。
与 display: block 相比,主要区别在于 display:inline-block 在元素之后不添加换行符,因此该元素可以位于其他元素旁边。
下例展示 display: inline、display: inline-block 以及 display: block 的不同行为:
实例
span.a { display: inline; /* span 的默认值 */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }
display 属性
display: inline
display: inline-block
display: block
display 的一种常见用法:inline-block 用于水平而不是垂直地显示列表项。下例创建了一个水平导航链接:
实例
.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }
原文链接:https://77isp.com/post/748.html
=========================================
https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。
数据库技术 2022-03-28
网站技术 2023-01-07
网站技术 2022-11-26
网站技术 2022-11-17
Windows相关 2022-02-23
网站技术 2023-01-14
Windows相关 2022-02-16
Windows相关 2022-02-16
Linux相关 2022-02-27
数据库技术 2022-02-20
小游客游戏攻略网游戏攻略网 2024年07月26日
抠敌 2023年10月23日
嚼餐 2023年10月23日
男忌 2023年10月22日
瓮仆 2023年10月22日
扫码二维码
获取最新动态