为什么第五个li，不能与同一行的li标签对齐

Question

例子：
http://jsfiddle.net/3abjkz1h/

6个li元素分2行显示，li元素宽度使用的百分比，当body宽度不足时，为什么字数多的li元素出现了窜行

Answer 1

inline元素的对齐方式是由vertical-align控制的。而默认值vertical-align: baseline则会有这样的结果：

绿线为baseline。

解决方案：给li加上vertical-align: top;

http://jsfiddle.net/3abjkz1h/6/

---

overflow:hidden也能让它们对齐的原因，是因为它为每一个li创建了BFC（Block Formatting Context），从此隔绝了内部文本的baseline和外部的baseline（因为上下文完全变化了）。

像这样：

关于BFC，可以读一下这一篇；关于FC，可以读一下W3Help的常规流介绍。

---

float:left从来都是顶对齐的。

Answer 2

你的li用了display:inline-block，应该用display:block; float:left;，ul下面再清浮动。

原理我不知道，但一般做这样的列表用float:left

Answer 3

.investigation_list li 定了高度，可在 .investigation_list li 里面加一个 overflow:hidden;

你都定了宽度和高度，建议用 float:left

Answer 4

display:inline-block 好像是按行来排列的当你加了宽度限制之后一行不能就不能容纳太多字就变成了两行
，所以图片就向上一行字的距离，所以用float 来排列才是正确的

Answer 5

Humphry正解。

个人建议是想让li横排这样的操作，还是让li左浮动，然后对ul添加overflow属性比较好。

对li使用inline-block时，会将html中li之间的换行符解释为空格，造成两个li之间有间隔。当然可以通过强行设置字号来解决，不过总觉得有些别扭不是吗。