• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

CSS小技巧：position:absolute以及float:left/right都可以使用元素变为display:inline-block（块状元

当前位置：网站建设 > 技术支持

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

 1. position : absolute 

 2. float : left 或 float:right 

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">这里是单行文字。</a>
</div>

css代码

<style>
.container a{
    position:absolute;
    width:300px;
    height: 200px;
    background:#ccc;
    text-align: center;
    line-height: 200px;
}
</style>

与display相关的文章：

text-align:center与display:inline组合块居中，多个行内元素/块状元素居中方法

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。