html - Overflow-x : scroll works but items not aligned -
i have fixed div , inside of x-scrollable div contains many items. code :
<div class="gallery-items" style="position: fixed"> <div class="scrollable"> <div class='gallery-items-item'>....</div> <div class='gallery-items-item'>....</div> <div class='gallery-items-item'>....</div> <div class='gallery-items-item'>....</div> <div class='gallery-items-item'>....</div> <div class='gallery-items-item'>....</div> <div class='gallery-items-item'>....</div> </div> </div> .gallery-items { position: fixed; ..... } .scrollable { overflow-x: scroll; overflow-y: hidden; width: 100%; height: 100%; white-space: nowrap; } .gallery-items-item { height: 130px; width: 150px; cursor: pointer; padding-left: 5px; padding-right: 5px; padding-top: 5px; margin-right: 10px; position: relative; background-color: #4d4d4d; display: inline-block; } but items not aligned on same scrollable line.. (http://croisentoi.com/cafe/menu/ when clicking on picture)
is there miss ? thank you.
add vertical-align: top; .gallery-items-item align them top of gallery-items.
Comments
Post a Comment