要解决的问题：今天玩了点前端，想用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只需替换一个浮动样式就都解决了，细节和差异理解透彻了，才能做出更好的效果和节省更多不必要的时间。