inline-block的常见应用场景



inline-block的特点是结合inline和block两种属性的特性，可以设置width和height，并且元素保持行内排列的特性，基于这一点，所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block

 

1、网页头部菜单

<div class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">aaa</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">ggg</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">ccc</a>
        </li>
    </ul>
</div>

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

2、内联块元素

除了菜单之外，一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。

例如

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

<div>
    点击右边的按钮
    <a href="javascript:;" class="button">
        提交
    </a>
</div>

<style>
.button{ display: inline-block; width: 60px; height: 35px; background: #b61d1d; color: #fff;text-align: center; line-height: 35px; font-size: 15px; text-decoration:none;}
</style>

 

文章转载自： display:inline-block的介绍   http://www.studyofnet.com/news/1097.html、