Question

我有一个固定的div，里面有一个x-scrollable div，里面包含很多项目。这是我的代码：

<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;
}

但项目未在同一可滚动线上对齐..（http://croisentoi.com/cafe/menu/点击图片时）

我想念的是什么吗？谢谢。

Answer 1

尝试使用垂直对齐：介质;

希望它可以帮助你..

Answer 2

将vertical-align: top;添加到.gallery-items-item，将它们全部对齐到gallery-items的顶部。

溢出-x：滚动有效但项目未对齐

2 个答案: