javascript - 通过列表项宽度显示 block 计算 ul 的宽度

Question

我正在练习可重用编码，所以我决定从头开始构建缩略图滚动条。

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

我发现的第一个修复方法是在计算父元素的宽度之前将每个元素的宽度增加 2px。 我发现的第二个修复是添加字间距:-2px；到周围的 ul，但它偏离了大约 1px。 最终的解决方案似乎是最好的解决方案，这是将 font-size:0 添加到父项，并将另一个 font-size 添加到列表项。

我的好奇心要了我的命，我需要知道解决这个问题的最佳方法是什么，以及为什么 font-size 有效。

这是我正在处理的元素的 jsfiddle http://jsfiddle.net/SusannDelgado/wNvsx/

在 fiddle 下面的几行设置大小

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

Answer 1

行内框的行为就像单词一样，中间会出现一个空格。

该空间的大小取决于字体大小和使用的字体。大小为零，空格(和字母)消失:)。

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

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

.如果您在将 HTML 上线之前缩小 HTML，空间将被消除