深入解析CSS的display:inline-block属性的使用

2020-05-14 07:50:25易采站长站整理

网页头部菜单

网页头部的菜单就是典型的横向排列并且需要设置大小的应用,在inline-block之前,实现菜单基本都是用float属性来实现,float属性会造成高度塌陷,需要清除浮动等问题,使用inline-block实现就不需要在意这样的问题。代码如下:

HTML代码

XML/HTML Code复制内容到剪贴板

<div class="header">  
    <ul>  
        <li>  
            <a href="javascript:;" target="_blank">服装城</a>  
        </li>  
        <li>  
            <a href="javascript:;" target="_blank">美妆馆</a>  
        </li>  
        <li>  
            <a href="javascript:;" target="_blank">超市</a>  
        </li>  
        <li>  
            <a href="javascript:;" target="_blank">全球购</a>  
        </li>  
        <li>  
            <a href="javascript:;" target="_blank">闪购</a>  
        </li>  
        <li>  
            <a href="javascript:;" target="_blank">团购</a>  
        </li>  
        <li>  
            <a href="javascript:;" target="_blank">拍卖</a>  
        </li>  
        <li>  
            <a href="javascript:;" target="_blank">金融</a>