Question

我的代码如下：

#under {
    width: 100%;
    height: 50px;
    background-color: #D4D4D4;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000;
    -moz-box-shadow: inset 0px 0px 4px 0px #000000;
    box-shadow: inset 0px 0px 4px 0px #000000;
    overflow-x: scroll;
    white-space: nowrap;
}
#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#under ul li {
    min-width: 100px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    background-color: #999;
    display: block;
}

基本上，我的#under div里面有li元素。我希望他们“溢出”容器，以便它可以在X轴上滚动，但我不能为我的生活找出如何做到这一点！

它会使li元素显示在彼此之下。

感谢任何帮助，谢谢！

编辑：实例https://babblebox.me/mobile/

Answer 1

它们仍处于悬浮状态，因为它是浮动的，因为宽度：100％它正在调整屏幕的可用大小而不是div。

基本上我认为你应该添加ul一些宽度

我的意思是：

#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 8000px;
}

Answer 2

您始终可以滚动元素的直接子元素。您可以像Kokers所说的那样制作一个非常宽的<ul>，或者像我一样，在<ul>上应用滚动样式。

#under {                                                                                                                                                                                                         
    width: 100%;
    height: 50px;
    background-color: #D4D4D4;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000;
    -moz-box-shadow: inset 0px 0px 4px 0px #000000;
    box-shadow: inset 0px 0px 4px 0px #000000;

}   
#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    overflow-x: scroll;
    white-space: nowrap;
}   
#under ul li {
    min-width: 100px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #999;
    display: inline-block;
}

*注意：我在float: left; display: block中将display: inline-block更改为#under ul li

您可以在此处看到它：http://jsfiddle.net/rvt5N/

Answer 3

你将#under的宽度设置为小于它，比你的溢出工作，并以像素为单位给出宽度......

Answer 4

在overflow: auto;中尝试#under？

允许溢出X.

4 个答案: