inline-block的常见应用场景

来源：互联网发布：网络女主播喝醉编辑：程序博客网时间：2024/06/05 16:12

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、

0 0