通过列表项width display-block计算ul的宽度

Question

我正在练习可重复使用的编码，所以我决定从头开始构建一个缩略图卷轴。

我在一组带有ul的列表项中使用display：inline-block。计算我使用的ul的宽度.outerWidth（）;我注意到空间显示的一些修复：inine-block放入元素之间但是我不确定哪个是最佳解决方案。

我发现的第一个修复是在计算父元素的宽度之前为每个元素宽度添加2px。 我找到的第二个修复是添加字间距：-2px;到了周围的ul，但是大约1px。 最终解决方案似乎是最好的解决方案，这是为父项添加font-size：0和列表项的另一个字体大小。

我的好奇心正在扼杀我，我需要知道解决这个问题的最佳方法是什么以及为什么字体大小有效。

这是我正在研究http://jsfiddle.net/SusannDelgado/wNvsx/

的项目的jsfiddle

在小提琴中，下面的行设置大小

  var liw = parseInt($("#" + _globals.name + " > ul > li").outerWidth(true));
    _globals.innerwidth = ((liw) * _globals.count)

Answer 1

内联框的行为就像单词一样，并且中间出现空格。

使用的字体大小和字体的空间中继的大小。大小为零，空格（和字母）消失:)。

html代码中的其他解决方案：让li相互接触（没有空格也没有缩进代码）
<li>item</li><li>
next-item</li><li>
....</li>
 或插入HTML注释以填充该空格

<li>item</li><!--  
--><li>

。如果你在使用它之前缩小HTML，那么空间将被解决