css中易错漏点汇总（待续。。。）

时间 2019-11-08

标签 css 错漏汇总待续栏目 CSS 繁體版

原文原文链接

1.display:inline-block和float，针对如下代码举例：css

<nav class="menu">                
    <ul>                    
        <li class="choice1"><a href="#">Articles</a></li>                    
        <li class="choice2"><a href="#">Books</a></li>                    
        <li class="choice3"><a href="#">Resources</a></li>                    
        <li class="choice4"><a href="#">Bookshelf</a></li>                    
        <li class="choice5"><a href="#">Contact Me</a></li>                    
        <span>test</span>                
    </ul>
</nav>复制代码

a).对<li>标签设置display:inline-block，<li>由纵向排列变为横向排列，但每一个<li>以前出现了4px的间隔，能够经过getBoundingClientRect()输出各元素的left,right值查看。同时<li>标签前的黑色圆点消失。字体

b).4px的间隔产生的缘由是<li>的换行，能够选择不换行，或者将父元素的字体大小设置为0，子元素设置字体大小（父级设置为0后，子级不能使用相对单位em），或参考：blog.csdn.net/ime33/artic…。<li>的圆点消失在于<li>默认display:list-item,设置为inline-block后改变了默认显示，将span标签设置display：inline-block也会出现圆点。spa

nav.menu ul{            
            font-size:0;        
        }        
nav.menu li{            
            display:inline-block;            
            font-size:15px;/*父级为0时，子级不能使用相对单位em*/        
        }        
nav.menu span{            
            display:list-item;        
        }复制代码

c).对<li>标签设置float:left,<li>由纵向排列变为横向排列，但没法准确的保证整个<ul><li>在页面中居中。.net

d).解决float元素的居中问题，能够将<ul>设置为display:inline-block,，使<ul>收缩包紧横向排列的<li>，这时<ul>标签具备行内元素的特征，设置包裹<ul>标签的<nav>标签text-align:center，便可使<ul>在<nav>居中。code

nav.menu{            
            text-align: center;            
            font-size: 0.8em;        
        }        
nav.menu ul{           
            display: inline-block; /* 收缩包紧列表项*/        
        }        
nav.menu li{            
            float: left;        
        }复制代码