通過列表項寬度計算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

回答

相關問題