css white-space:nowrap 水平滚动错误答案

【问题标题】：css white-space:nowrap horizontal scroll bugcss white-space:nowrap 水平滚动错误
【发布时间】：2014-04-21 22:23:04
【问题描述】：

我有以下标记

<style type="text/css">
    #outer
    {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        width:100%;
        white-space:nowrap;
    }

    #inner
    {
        background-color:#CCCCCC;
        margin:0px 4px 0px 4px;
        padding:5px 5px 0px 5px;
        border:1px solid #9A9A9A;
        border-width:1px 1px 0px 1px;
    }

</style>

<div id="outer">
    <div id="inner">
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    </div>
</div>

当浏览器足够宽时，它看起来像这样

当浏览器变窄时，它看起来像这样

当我滚动时，我希望窄视图的灰色背景一直向右延伸。我的标记和 css 会导致这种不良影响（发生在 Chrome、FF3 和 IE8 中）

【问题讨论】：

+1 这甚至发生在 Facebook 上！

标签： css whitespace horizontal-scrolling nowrap

【解决方案1】：

一个简单的解决方案是这样做：在#outer 上，删除width: 100% 并添加float: left。

Live Demo

【讨论】：

不想左漂怎么办？
@NathanGould：如果不知道为什么你不想使用float: left，这很难回答。如果有帮助，您可以改用 display: inline-block。