javascript - 滚动未显示在 jquery 创建的列表中

Question

所以我有一个带有列表 ul 的 html 框:

<div id="profile_photo_conteiner">
                <ul>

     </ul>
 </div>

在此列表中，我使用 jquery 添加了一些图片:

...
   var i =1;
    var num = 10;
    while (i <= num)
        {
                        $( "#profile_photo_conteiner ul" ).append("\
                        <li>\
                            <img src=\"\"/>\
                            <div class=\"gallery_image_title\">\
                                <h5 class=\"gallery_title\">Click me</h5>\
                            </div>\
             </li>\
                    ");

显示了所有内容，但我没有按 x 轴滚动。我尝试了很多变体，发现如果我删除 ul 和 li 并只添加图片，则会显示滚动条，但一旦我尝试使用 ul，它就不会显示。 jsfiddle - code - 这是我的一些测试代码。那么 list ul 是否有滚动它们的选项？部分 CSS:

#profile_photo_conteiner {
height: 210px;
padding-top: 10px;
overflow-y: hidden;
    overflow-x: auto;
width: 200x;
white-space:nowrap;
margin-bottom: 55px;
border: solid 1px red;

}

/*-galery*//*
#profile_photo_conteiner ul {
  overflow-x:scroll;
  overflow-y:hidden;

}*/


#profile_photo_conteiner ul li{
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    padding: 10px;
    list-style-type: none;
    position:relative;
    cursor: pointer;


}

#profile_photo_conteiner ul li img {
    display: block;
    width: 150px;
    height: 150px;
}

所以我删除了 jquery 代码，因为问题不在其中好的，这里是content - 它是相同的代码，但高度超过 1000 像素以表明我们有足够的内容， content -2 - 使用相同的代码但具有正常高度所以我们有 anogh 内容 oveflow-y 被隐藏并且您看不到结果的其余部分，overflow-x 不会显示(如果我放置 overflow-x 滚动)滚动将出现，但它不会工作，因为内容不按 x 轴。

Answer 1

从你的代码来看，你似乎是通过 css 隐藏了垂直滚动条:

溢出-y:隐藏；

应该是

overflow-y: auto;

然后您可以通过对 overflow-x

执行相反的操作来隐藏水平滚动

已更新 fiddle