水平滚动不显示图像

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

你可以将你的display设置为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

Answer 2

我删除<ul> and <li>的东西，并添加比它的工作：https://jsfiddle.net/yLy9hgfu/2/

在我们的风格中添加css：

.product-listing {
    padding: 0;
    width: 50%;
    overflow: auto;
    border:1px solid #333;
}

.product-listing {
    padding: 0;
    width: 50%;
    overflow: scroll;
    border: 1px solid #333;
    display: -moz-box;
    display: -webkit-box;
}
.list {
    width: 230px;  background:#ddd;
    border: 1px solid #888;
    height: 40px;
}

喜欢：https://jsfiddle.net/yLy9hgfu/2/