display的inline-block替代float的一些场景

Posted 2020-09-22 Stephen666

一、横向菜单

inline-block是不换行的块级元素，对于使用ul-li结构的网页顶部横向导航菜单非常有用。

如果不使用inline-block属性，只能使用float来浮动每个li元素，写起来比较麻烦，如果使用了inline-block代码相对简单：

 1 <div class="header">
 2     <ul>
 3         <li>
 4             <a href="javascript:;" target="_blank">服装城</a>
 5         </li>
 6         <li>
 7             <a href="javascript:;" target="_blank">美妆馆</a>
 8         </li>
 9         <li>
10             <a href="javascript:;" target="_blank">超市</a>
11         </li>
12         <li>
13             <a href="javascript:;" target="_blank">全球购</a>
14         </li>
15         <li>
16             <a href="javascript:;" target="_blank">闪购</a>
17         </li>
18         <li>
19             <a href="javascript:;" target="_blank">团购</a>
20         </li>
21         <li>
22             <a href="javascript:;" target="_blank">拍卖</a>
23         </li>
24         <li>
25             <a href="javascript:;" target="_blank">金融</a>
26         </li>
27         <li>
28             <a href="javascript:;" target="_blank">智能</a>
29         </li>
30     </ul>
31 </div>

css代码如下：

1 a, ul, li { padding: 0; margin: 0; list-style-type: none; }
2 a { text-decoration: none; color: #333; } 
3 .header ul { font-size: 0; text-align: center; }
4 .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

二、需要行内排列设置大小

例如使用a标签做按钮时，需要设置按钮的大小，我们就可以使用inline-block来实现。

1 <div>
2     点击右边的按钮直接购买
3     <a href="javascript:;" class="button">
4         购买
5     </a>
6 </div>

css代码：

 1 .button {
 2   display: inline-block; 
 3   width: 150px; 
 4   height: 45px; 
 5   background: #b61d1d; 
 6   color: #fff; 
 7   text-align: center; 
 8   line-height: 45px; 
 9   font-size: 20px; 
10 }

三、布局

比如创建一个三列布局：

 1 <div class="wrap">
 2     <div class="header">
 3         网页头部
 4     </div>
 5     <div class="content">
 6         <div class="left">
 7             左侧
 8         </div>
 9         <div class="center">
10             中间
11         </div>
12         <div class="right">
13             右侧
14         </div>
15     </div>
16     <div class="footer">
17         网页底部
18     </div>
19 </div>

css代码：

1 body, div { margin: 0; padding: 0; }
2 .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }
3 .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }
4 .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; }
5 .content .left, .content .right { width: 200px; }
6 .content .center { width: 600px; background: #00ffff; }

效果图：

关于inline-block的应用，只要是从左到右，从上到下，并且需要设置大小的列表都可以用它来实现，而这种需求是非常常见的，相比于float，我更推荐inline-block。