display:inline-block的使用方法

小編給大家分享一下display:inline-block的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

蚌山網站制作公司哪家好，找創新互聯建站！從網頁設計、網站建設、微信開發、APP開發、響應式網站等網站項目制作，到程序開發，運營維護。創新互聯建站于2013年開始到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯建站。

首先我們應該知道inline-block元素的含義

display:inline-block不設置寬度時，內容撐開寬度；不會獨占一行，支持寬高，代碼換行被解析成空格，總而言之，inline-block包含了行內元素和塊內元素的特點，即設置了inline-block屬性的元素既擁有了block元素可以設置width和height的特性，又保持了inline元素不換行的特性。

知道了inline-block的含義后，我們接著就來看一看inline-block該怎么用?

inline-block元素的用法：

一切需要行內排列并且可設置大小的需求就可以用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元素實現效果如下：

display:inline-block的使用方法