css中易錯漏點彙總（待續。。。）

1.display:inline-block和float，針對如下代碼舉例：

<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也會出現圓點。

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>在頁面中居中。

d).解決float元素的居中問題，能夠將<ul>設置爲display:inline-block,，使<ul>收縮包緊橫向排列的<li>，這時<ul>標籤具備行內元素的特徵，設置包裹<ul>標籤的<nav>標籤text-align:center，便可使<ul>在<nav>居中。

nav.menu{            
            text-align: center;            
            font-size: 0.8em;        
        }        
nav.menu ul{           
            display: inline-block; /* 收縮包緊列表項*/        
        }        
nav.menu li{            
            float: left;        
        }複製代碼