ul和li标签的宽度问题

Question

演示效果：
http://runjs.cn/detail/xxjybtf7

源码：
http://runjs.cn/code/xxjybtf7

问题：
为什么ul中的li标签不能够三个同行显示？

li的宽度是60+2,而ul的内容区是200px，足够三个li标签同行显示的呀,为什么效果中是两个同行呢

Answer 1

因为编码习惯

<ul>
    <li></li>
    <li></li>
<ul>

其实在每个换行之间都是有空白文本的,这也导致也产生不必要的间距;
例如你改为

<ul><li></li><li></li></ul>

就可以避免这种问题
或者设置
ul{font-size:0}
li{font-size:12px}

Answer 2

我这边看到是三个同行啊：

Answer 3

display:inline-block如果li不是紧邻的(有空格或回车)中间会有几像素的间隙,所以可能会挤下来,可以给父元素加font-size:0来解决,也可以给li加float