inline-block佈局方式

時間 2019-11-10

標籤 inline block 佈局方式简体版

原文原文鏈接

剛研究了一下inline-block佈局方式css

inline-block佈局方式是一種比float浮動更優的一種佈局方式。html

一個超簡單的demo瀏覽器

html:佈局

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>inline-block佈局</title>
 6 </head>
 7 <body>
 8 <ul class="inline-block">
 9     <li class="inline-block-in"><a href="#">首頁</a></li>
10     <li class="inline-block-in"><a href="#">詳情介紹</a></li>
11     <li class="inline-block-in"><a href="#">幫助中心</a></li>
12     <li class="inline-block-in"><a href="#">聯繫咱們</a></li>
13     <li class="inline-block-in"><a href="#">關於咱們</a></li>
14 </ul>
15 </body>
16 </html>

css:spa

 1 <style>
 2     ul li {
 3         list-style: none;
 4         font-size: 12px;
 5         letter-spacing: normal;
 6         padding: 0 10px;
 7     }
 8     .inline-block {
 9         font-size: 0px;//inline-block 佈局核心代碼
10         letter-spacing: -8px;////inline-block 佈局輔助代碼,兼容safari 瀏覽器
11     }
12     .inline-block-in {
13         display: inline-block;//inline-block 佈局核心代碼
14         vertical-align: top;//inline-block 佈局輔助代碼
15     }
16     .inline-block-in {
17         *display: inline;//inline-block 佈局輔助代碼,兼容IE6~7
18     }
19 </style>