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

当内容太宽时，页面会自动水平滚动。如果你想要一个块中的大量元素保持太宽，那么你需要使它们的父元素太宽（在这种情况下不适用）或者停止父包装内嵌元素（这是适用的）。要阻止父级包装<a>代码，请将white-space: nowrap添加到.topbar规则。

如果您希望.topbar的背景始终在内容后面填写，那么您还需要将width属性更改为min-width。

此处an example的{{3}}正在运行而没有min-width修复（对我来说它溢出的宽度大约为800px）。

正如评论中所述，为了确保当内容比网页宽时，边距不会溢出父级，请将padding: 0.1px添加到.topbar规则中。这会强制子边距保留在父边距内（而不是重叠），而不会影响显示。

Answer 2

您可以使用overflow属性。 http://www.w3schools.com/cssref/pr_pos_overflow.asp

我希望它有所帮助。

Answer 3

然后你必须给你的div一个固定的宽度。

而不是width: 100%;将其替换为菜单的像素数，例如： width: 700px;

.topBar {
    background-color:rgb(161,35,35);
    position:relative;
    display:inline-block;
    width: 700px;
    text-align:center;
    height:40px;
}

Answer 4

您需要在white-space课程中设置相应的parent属性。

.parent {
  min-width: 100%;
  white-space: nowrap;
}

您可以看到a working example。

如何在调整大小时停止<div>的内容开始新行？</div>

4 个答案: