由于各种原因,我在一个div内部有一个嵌套的ol,其中列表的内容超过了容器的大小.
因为容器具有固定宽度,所以列表元素的背景不超过容器的可视区域,但是内容正确滚动.
我创建了一个jsFiddle,显示了我正在试图解释的简化示例.
我希望包含的元素的宽度与溢出的内容的宽度相匹配.在jsFiddle中,这意味着红色背景不会在中途被切断.
谢谢.
div
{
border: 1px solid black;
margin: 33% auto;
overflow: scroll;
white-space: nowrap;
width: 100px;
}
div > ol
{
background: red;
width: 100%;
}
解决方法
只需使用display：inline-block.您可以阅读更多的W3C规范.
用这两个元素样式中的display：inline-block替换width：100％.
