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 - 这是我的一些测试代码。那么列表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没有出现（如果我把溢出 - 滚动将显示滚动但由于内容不通过x轴，它将无法工作。

Answer 1

从您的代码中，您似乎通过css隐藏了垂直滚动条：

overflow-y: hidden;

这应该是

overflow-y: auto;

然后，您可以通过对overflow-x

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

更新了fiddle

Answer 2

由于内容尚未溢出，因此您无法看到水平滚动（x轴），就像您想要/希望它一样。您可以尝试通过将容器的最大宽度设置为小于内容来触发此操作。

overflow-y: auto;
overflow-x: hidden;

如果您想要显示垂直滚动，可以设置

{{1}}

滚动未显示在jquery

2 个答案: