logo标签列表

允许溢出 X

cssoverflow
4

我的代码如下:

#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/
2
“我希望它们能够‘溢出’容器，这样就可以在X轴上滚动，但是我无论如何都想不通为什么。” - 你为什么要这样做呢？;) - Polynomial
无论如何，我认为你的句子漏掉了一部分。具体问题是什么？ - Polynomial
你使用的是哪个浏览器？这个属性在IE8及更早版本中不起作用。 - Joel Etherton
啊哈，让我重新表达一下，“我真的无法弄清楚如何做到这一点” - 而我的浏览器是Chrome 15。 - oyed
@Joel Etherton：它可以在IE5+中工作，尽管有一些小问题。 - BoltClock
@BoltClock：非常好，这个属性在低于9版本的IE中并没有按预期工作。需要使用一个hack来解决。 - Joel Etherton
4个回答
2

它们仍然在下方，因为它在浮动，并且由于width:100%，它会根据屏幕的可用尺寸而重新调整大小，而不是div的尺寸。

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

我的意思是：

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

您始终可以滚动元素的直接子元素。您可以像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/

0

你需要将#under的宽度减小，这样溢出就会起作用，并以像素为单位给出宽度...

-1

尝试在#under中使用overflow: auto;？

啊，忽略我的回答吧。下次我会在回答之前先测试一下。 - Lee Price
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接