Question

基本上，我有一个带有嵌套内容的主容器div。此div具有动态宽度，并将随页面调整大小。

现在，在这个div中，我有一个项目列表。所有项目都是固定宽度，我希望能够扩展容器div（overflow：auto）。如果我将列表设置为display：block;，它将变为容器的100％宽度。但是，如果有许多列表项强制使用水平滚动条，则阻止列表会在容器滚动条处停止，列表项会继续传递它。

以下是一个示例：http://jsfiddle.net/9tjZz/4/

如何让阻止列表扩展通过项目的容器列表的滚动条？

Answer 1

您可以使用clearfix来修复此问题...只需将clearfix类添加到容器中并添加相应的CSS即可。以下是工作示例：

http://jsfiddle.net/9tjZz/5/

这是您需要的CSS：

.clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    html[xmlns] .clearfix {
        display: block;
    }

    * html .clearfix {
        height: 1%;
    }

然后在需要的地方添加class="clearfix"。在你的情况下，它是容器。

嵌套div宽度在父可滚动div的滚动条处停止

1 个答案: