inline-block 在什么情况下可以使用？

最新推荐文章于 2021-06-15 20:15:17 发布

weiyong1999

最新推荐文章于 2021-06-15 20:15:17 发布

阅读量683

点赞数

分类专栏： CSS层叠样式表 PHP开发

PHP开发同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

CSS层叠样式表

17 篇文章 0 订阅

订阅专栏

序言

在css中，inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

轻松使用inline-block属性

浏览器兼容性

Chrome

Firefox 3 +

Opera

IE 8 +

IE6,IE7 只支持特定标签的inline-block,比如a,span标签，需要正确使用inline-block

环境

FF2不支持该属性，好在FF2在中国市场并不流行，即使有大家使用FF3,所以问题不存在了，需要跨浏览器兼容性，而且简单，只要牢记一句话，只对a,span标签使用该属性，应该就可以兼容当前主流浏览器了，而且简单好用，不需要做什么修正。

span{
    display:inline-block;

}

使用环境

在很多情况下，我们需要设置span的宽度，但是在inline下，width是没有效果的，我们要设置span的宽度，就需要使用该属性。

<html>
        <head>
                <style>
                        
                        span{
                                display:inline-block;
                                width:100px;
                        }
                </style>
        <head>
        <body>
                <div>
                        <span>11</span>
                        测试数据1
                <div>
                <div>
                        <span>111111</span>
                        欢迎到我的itbug.baike.com 进行投票
                <div>
                
                
        </body>
</html>