display:inline-block怎么用？inline-block元素的用法示例

互联网 18-10-23

在css的display属性中inline-block是行内块元素，那么display:inline-block该怎么用呢？本篇文章就来给大家介绍一下inline-block的用法，有需要的朋友可以参考一下。

首先我们应该知道inline-block元素的含义

display:inline-block不设置宽度时，内容撑开宽度；不会独占一行，支持宽高，代码换行被解析成空格，总而言之，inline-block包含了行内元素和块内元素的特点，即设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

知道了inline-block的含义后，我们接着就来看一看inline-block该怎么用?

inline-block元素的用法：

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Document</title>     <style>         div{             width: 30%;             background: lightblue;             height: 100px;             text-align: center;             line-height: 100px;         }         a{             color:#fff;             text-decoration: none;             display: inline-block;             width: 100px;             height: 30px;             line-height: 30px;             background: orange;         }     </style> </head> <body>     <div>         <a href="">首页</a>         <a href="">视频</a>         <a href="">工具</a>         <a href="">登录</a>     </div> </body> </html>

inline-block元素实现效果如下：