1

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

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

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

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

这是我在http://jsfiddle.net/Sus ​​annDelgado/wNvsx/ 上工作的项目的 jsfiddle

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

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

1 回答 1

1

inline-boxes 的行为就像单词一样，中间会出现一个空格。

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

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

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

. 如果你把 HTML 压缩到上线之前，空间就会被消除。

于 2013-06-23T22:44:01.027 回答