css - 如何在调整大小时阻止 的内容开始新行？

Question

我在做一个小元素时遇到了问题。我有一个导航栏，它是一个 div，里面有链接，但是每当我调整页面大小时，最后两个都会开始一个新行。我希望链接保持水平位置并在页面上添加滚动条。例如，当您在谷歌上并调整浏览器大小时，溢出的内容不会开始新行。添加了一个滚动条。我试过使用父 div 并设置最小宽度，但都没有用。

CSS:

.topBar {
    background-color:rgb(161,35,35);
    position:relative;
    display:inline-block;
    width:100%;
    text-align:center;
    height:40px;
}
.text2 {
    font-size:35;
    text-decoration:none;
    margin-left:4%;
    margin-right:4%;
}
.parent {
    min-width:100%;
}

和 HTML:

<div class="parent">
    <div class="topBar">
        <a class="text2" href="placeholder.html">Media Mash</a>
        <a class="text2" href="placeholder.html">Film</a>
        <a class="text2" href="placeholder.html">Music</a>
        <a class="text2" href="placeholder.html">Games</a>
        <a class="text2" href="placeholder.html">Books</a>
    </div>
</div>

Answer 1

当内容太宽时，页面会自动水平滚动。如果你想让一个 block 中的很多元素保持太宽，那么你要么需要让它们的父元素太宽(这在这种情况下不适用)，要么停止父元素包装行内元素(这是适用的)。停止父包装 <a>标签，添加 white-space: nowrap到 .topbar规则。

如果你想要.topbar的背景始终在内容后面填写，那么您还需要更改您的 width属性(property)min-width .

这是 an example它在没有 min-width 的情况下运行修复(对我来说它溢出大约 800 像素宽)。

如评论中所述，要确保当内容比页面宽时页边距不会溢出到父级之外，请添加 padding: 0.1px到 .topbar规则。这会强制子边距保持在父边距内(而不是与其重叠)，而不会太大地影响呈现。