通过列表项宽度显示块计算 ul 的宽度答案

【问题标题】：calculating the width of ul by list items width display-block通过列表项宽度显示块计算 ul 的宽度
【发布时间】：2013-06-24 06:44:01
【问题描述】：

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

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

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

我的好奇心正在扼杀我，我需要知道解决此问题的最佳方法是什么以及为什么 font-size 有效。

这是我正在从事的项目的 jsfiddle http://jsfiddle.net/SusannDelgado/wNvsx/

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

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

【问题讨论】：

inline-boxes 的行为就像单词一样，中间会出现一个空格。该空间的大小取决于使用的字体大小和字体。大小为零，空格（和字母）消失:)。 html 代码中的其他解决方案：使 li 相互接触（没有空格或缩进代码）或插入 HTML 注释以填充该空间。如果您在将其上线之前缩小 HTML，则空间将被消除（如果您希望将此作为您的答案......我会这样做）
谢谢 :) 不知道这一点让我发疯了
你可以把它作为答案，但我完全理解你
oki 它可能对其他人有用（除非它已经是重复的）。祝你好运

【解决方案1】：

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

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

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

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

。如果你在上线之前把 HTML 缩小，空间会被消除

【讨论】：