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

我正在实践可重用的编码，所以我决定从头开始构建一个缩略图卷轴。通过列表项宽度计算ul的宽度display-block

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

我发现的第一个修补程序是在计算父元素的宽度之前，为每个元素宽度添加2px。我发现的第二个修复是添加word-spacing：-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)

来源

2013-06-23 Susan Delgado

内联框的行为与单词相似，并会出现空格。使用字体大小和字体的空间中继大小。大小为零，空间（和字母）消失:)。在html代码中的其他解决方案：make li互相触摸（无空格或缩进代码）或插入HTML注释以填充该空格。如果你在将HTML缩小之前把它放在一行，空间将被消除（如果你想这个作为你的答案...我会这样做） –

谢谢:)它让我疯狂不知道这 –

你可以把它作为一个答案，但我完全理解你 –

内嵌盒的行为就像也就是说，在出现之间ANS的空间。

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

在HTML代码中的其他解决方案：让李触摸对方（没有空间也没有缩进代码）
<li>item</li><li> next-item</li><li> ....</li>
或插入HTML注释来填补这一空间

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

。如果您在缩小HTML之前将其缩小，则空间将被消除

来源

2013-06-23 22:44:01

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

回答

相关问题