水平滚动和剪切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%，然后设置一些填充和边距。

Answer 2

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

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

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

Answer 3

如果您希望标题向右滚动而不被窗口剪切，则为标题设置固定宽度：

header{width:1000px;}

fiddle demo

如果您希望它随窗口展开，则设置相对宽度或使用绝对定位：

header{width:100%;}

fiddle demo

header{position:absolute;left:0;right:0;}

fiddle demo