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

这对我有用。

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

Answer 2

如果您根本不希望顶部栏移动，您可以尝试position: fixed删除宽度并设置顶部、左侧和右侧位置。例如：

.top-bar.blog {
    position: fixed;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 50px;
    white-space: no-wrap;
    background: violet;
    overflow: hidden;
}

将顶部、左侧、右侧和高度数字更改为您想要的任何值。