css - CSS 宽度 100%，包括溢出

Question

由于各种原因，我在 a 中嵌套ol了一个div，其中列表的内容超出了容器的大小。

因为容器的宽度是固定的，所以列表元素的背景不会超出容器的可视区域，但内容可以正常滚动。

我创建了一个jsFiddle，显示了我试图解释的简化示例。

我希望包含元素的宽度与溢出内容的宽度相匹配。在 jsFiddle 中，这意味着红色背景不会在中途被切断。

谢谢。

div
{
    border: 1px solid black;
    margin: 33% auto;
    overflow: scroll;
    white-space: nowrap;
    width: 100px;
}

div > ol
{
   background: red;
   width: 100%;
}​

Answer 1

只需使用display: inline-block. 您可以在 W3C 规范中阅读更多内容。

在这两种元素样式中替换width:100%为。display:inline-block