调整大小时如何阻止 a 的内容<div>开始新行？

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。

下面是一个在没有min-width修复的情况下运行的示例(对我来说，它的溢出宽度约为800px)。

如注释中所述，当内容比页面宽时，为了确保页边距不会溢出父级之外，请将padding: 0.1px添加到.topbar规则中。这迫使子页边距保持在父页边距内(而不是重叠)，而不会对演示产生太大影响。

Answer 2

您可以使用溢出属性。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

您需要的是在parent类中相应地设置white-space属性。

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

您可以看到一个工作示例。