css - 水平滚动和剪切 div

Question

我有一个顶部栏可以放在我的博客中:

<nav class="top-bar blog">
    STACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOW
</nav>

<style type="text/css">
    .top-bar.blog {
        width: 100%;
        white-space: no-wrap;
        background: violet;
        ...
    }
    body {
        background: black;
    }
</style>

当我将浏览器窗口调整为小尺寸以查看水平条时，我得到以下信息:



这是预期的结果。

当我水平向右滚动时，结果如下:



div 被剪掉了。

奇怪的是，stackoverflow.com 的顶栏上也存在同样的问题。

我怎样才能防止这种情况发生，以便尺寸可以保持调整到窗口的正确部分而不是被“切割”？

Answer 1

This为我工作。

套装overflow:hidden width:100%然后只是一些填充和边距。