要解決的問題：今天玩了點前端，想用js(代碼就不浪費內存了)制作一個一下的表格：
解決的方法：使用的css樣式如下：
#list li{
border-right:1px solid #fff;
border-bottom:1px solid #fff;
list-style:none;
text-align:center;
display:inline-block;//因為學到inline-block了就實踐下
}
產生的效果：使用上面的方法，結果怎么設置也設置不成上面那個效果：
遇到的問題：第二行開始border總是不能連續；
解決方法：果斷擺渡了一下，原來是使用display:inline-block時vertical-algin候默認為baseline問題所致：
方法一：
#list li{
border-right:1px solid #fff;
border-bottom:1px solid #fff;
list-style:none;
text-align:center;
display:inline-block;
vertical-align:middle;//默認是baseline
}
方法二：
#list li{
border-right:1px solid #fff;
border-bottom:1px solid #fff;
list-style:none;
text-align:center;
float:left;//使用浮動
}
問題深究：inline-block和float的區別，什么時候使用
什么時候使用，取決於你的設計稿跟解決方法。如果你需要文字環繞容器，那浮動是不二選擇。如果你需要居中對齊元素，inline-block是個好選擇。
最終，這可以歸結為float跟inline-block的兩種屬性作用后的區別，你需要對其作出選擇。
- 使用inline-block：當你需要控制元素的垂直對齊跟水平排列時，使用inline-block。
- 使用浮動：當你需要讓元素環繞某一個元素時，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。
上圖，把一系列元素設置了浮動，因為盒子二號寬度的關系，可以發現盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。
浮動、inline-block和圖像排列
我使用inline-block主要是為了處理垂直對齊問題。我想這也是很多人使用這個屬性的原因。我制作的很多站點都不可避免的帶有一些圖片列表。
若父元素中的圖片等高，設置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是因為浮動后，圖片脫離了文檔流。
而inline-block由於未脫離文檔流，不會出現這個問題。如果你想再創建一列圖片時，不會受到上一列圖片inline:block的影響。而你在使用時需要時刻注意清除浮動，當內容不斷變化時這很容易產生bug。
這里有個更明顯的例子來體現inline-block跟float的區別：
我制作了一個demo來展示一下兩個寫法效果的區別
上面的塊級元素被設置了inline-block。由於他們沒有脫離文檔流，所以元素不會被某個過長的列擠上來。
inline-block導航
另一種inline-block的適用場景：橫向導航欄。通常，我們一般會設置a元素display：block然后進行浮動來制作。有時候我會直接通過對列表元素設置display:inline來制作。如果在制作中，你需要設置不同的display屬性來處理浮動，那么inline-block不失為一種更好的解決方案。
當你需要將元素排列成一行或者多行時，更傾向於考慮使用inline-block代替float。當然，直接使用table也是一種方法，他畢竟是專門用來處理橫向與縱向排列的元素的。
如果你需要創建一個很復雜的包含行列的布局，table是你的最佳選擇，不過你同樣也可以考慮inline-block
總結
我們經常使用浮動，但浮動並不是唯一的解決方案。有時候inline-block會更好，特別是你想排列一些圖片，或者橫向排列鏈接時。
Inline-block元素帶有一些行內元素的特征（橫向排列），同時內部也擁有塊級元素的屬性。這個跟浮動很類似，只不過有些區別。
這些區別決定了你該使用哪種方案。如果你很糾結垂直對齊問題或者橫向排列元素，不妨使用inline-block。如果你需要對一個元素跟圍繞他的一些元素進行更多控制，你需要浮動。
當然，table也是你處理一些問題的最佳方案。
同樣我想說的，這不是什么新東西，但我會通過這篇文檔還有demo來介紹一些應該使用但有些人尚未使用inline-block的場景。
項目demo：
#columnContent .item_ul>li
{
flaot:left;
width:203px;
margin:3px 5px;
vertical-align:top;
text-align:left;
}
效果
菜單居中和自適應需要根據頁面的寬度計算
css:
#columnContent .item_ul>li
{
display:inline-block;
width:203px;
margin:3px 5px;
vertical-align:top;
text-align:left;
*display:inline;
zoom:1;
}
菜單用ul-li標簽水平排列流狀顯示，float:left也可實現同樣的顯示效果，但是float時撐開一個li標簽，其他li標簽會環繞，特別注意 和學習float和inline-block的區別，特殊情況下利用inline-block的特殊性可以實現別樣的效果
上面是在實際項目中應用，要求實現后面一張圖的效果，起初li標簽用的是float:left，整體樣式沒問題，但是展開li標簽內容時，其他li標簽環 繞，這里又存在自適應，當頁面縮小時，每行的li標簽個數會減少，並且居中，曾經做過自適應和居中的計算以及考慮用table布局，現在回過頭太悲區 了，inline-block只需替換一個浮動樣式就都解決了，細節和差異理解透徹了，才能做出更好的效果和節省更多不必要的時間。