這篇部落格主要是講如何解決ul和li的一些問題，作為一個CSS大白，作者最近再做一個非常簡單的導航欄（一個ul中套4個li，一行）的時候遇到了很多問題。下面將一一講述。

問題如下：
1.ul中的li如何橫向排序？
2.display:inline、inline-block、block有什麼區別？
3.為何分配好100%後會換行？
4.為何ul與li會錯位？

1.ul中的li如何橫向排序？
解決方法：
兩種，一種是給li元素的樣式裡面加個float:left，一種是給li元素加display:inline或display:inline-block，更推薦第二種，因為第二種不會出現更多的錯位。

2.display:inline、inline-block、block有什麼區別?
答：看這個英文，就知道，inline是在一行中顯示，block是塊的意思，表示顯示可以調高度寬度的塊級元素，而inline-block就是將inline和block合起來，就是可以調寬高的塊級元素並且顯示在一行裡。（我找了好久才發現inline不可以調整高寬）

3.換行問題
答：假如有4個li，那每一個都設寬度為25%，會發現會換一行，但是設定的就是100%！那是因為間距的問題，加上一行margin:0 auto就可以了。

4.ul和li的錯位問題
最後我們會發現，ul和li會橫向錯位一點，（我的就是左邊ul比li多出來一點，右邊li比ul多出來一點）
答：將ul的樣式中加入padding:0px;即可解決。