html - 水平滚动不显示图像

Question

这是我第一次在这里发帖，大家好!

我几乎已经设置了一个成功的水平滚动，但滚动位于页面底部，水平滚动的滚动没有显示 as shown in this picture:HTML:

                    <article class="main-container grid_5 column">
                <!-- Main Container -->
                    <aside class="category-row">
                        <ul class="product-listing">
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                        </ul>
                    </aside>
                </article>

CSS:

nav li {
display:inline;
}

li {
list-style: none;
}

.main-container-images {
width:150px;
}

.main-container li {
display: inline;
white-space: nowrap;
}

.category-row {
height: 175px;
overflow: scroll;
overflow-y: hidden;
}

ul.product-listing {
overflow-x: visible;
overflow-y: hidden;
}
li.product-listing {
display: inline-block;
}

Answer 1

您可以将显示设置为table和table-cell。

你需要担心的两个类是这两个:

ul.product-listing {
  display:table;
  overflow-x: visible;
  overflow-y: hidden;
}
li.product-listing {
  display: table-cell;
}

基本上，您需要将 ul 元素设置为 display:table，将 li 元素设置为 display:table-cell。

有关更多信息，您可以查看此答案:https://stackoverflow.com/a/20640664/6739517