css – 将可滚动元素上的内部div的宽度设置为可滚动宽度的100%

前端之家收集整理的这篇文章主要介绍了css – 将可滚动元素上的内部div的宽度设置为可滚动宽度的100%前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使此内容div的宽度等于可滚动区域的宽度?
<div class="scrollable">
    <div class="content">short</div>
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>

用CSS:

.scrollable {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.content {
    background-color: lightblue;
    white-space: nowrap;
}

jsFiddle:http://jsfiddle.net/XBVsR/12/

问题:如果你滚动,你可以看到背景并没有像往常一样.

我试过设置宽度:100%,溢出:可见等,但无济于事.

编辑:我已经更新,以明确我不希望文本包装 – 我希望整个事情的水平滚动.

解决方法

你可以使用display:table-row;对于嵌套的div.看看 jsfiddle

猜你在找的CSS相关文章