CSS宽度100％，包括溢出 [英] CSS width 100% including overflow

问题描述

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

由于容器具有固定的宽度，因此列表元素的背景不会超出容器的可见区域，但内容会正确滚动.

我创建了一个 jsFiddle ，其中显示了我要解释的内容的简化示例. /p>

我希望包含的元素的宽度与溢出内容的宽度匹配.在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%.

For various reasons, I have a nested ol inside of a div, where the contents of the list exceeds the size of the container.

Because the container has a fixed width, the list element's background does not exceed the viewable area of the container, yet the contents scroll properly.

I have created a jsFiddle showing a simplified example of what I'm trying to explain.

I would like the width of the contained element to match that of the overflowed content. In the jsFiddle, that would mean the red background doesn't get cut off midway.

Thanks.

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

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

解决方案

Just use display: inline-block. You can read more in the W3C specs.

Replace width:100% with display:inline-block in those two element styles.

这篇关于CSS宽度100％，包括溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！