2016-12-16 72 views
0

我已經創建了一個簡單的用戶控制的旋轉木馬,但每個滾動的當前顯示的部分出來的對齊約4.5px。雖然數字是正確的滾動不對齊的元素

它通過收集所有的直接祖先<section>標籤它鉤在父容器的內部,設置在每個<section>display: inline-block和使每個<section>相同的寬度。

的滾動由<section>容器的margin-left屬性設置爲負N * W,其中N是滾動<section>標籤的數量和W是各自<section>的寬度來實現。

<section>標籤和容器的paddingmargin屬性已設置爲0

可能是什麼造成的?

JSFiddle:https://jsfiddle.net/835kxb2w/ - 我在<section>標記中添加了邊框以使問題更加明顯。

此外,在我認爲是一個相關的問題(與模板中剩餘的空白?),最後一節打破了一條新線。儘管<section>容器的寬度恰好是N * W像素。

感謝

+0

'直列block'會使您的標籤之間的任何空間的頁面空間,換行符包括在內。你可以通過使用'float'來避免這種情況,通過刪除代碼中的空格/換行符,或者用'font-size:0px; – Santi

回答

0

添加font-size: 0;.profileService_profileDescriptors類(從.beautySection刪除邊框樣式)。

Reasoning here