你如何停止一个内容 <div> 调整大小时从开始新行开始？

Question

我有一个小项目有问题。 我有一个导航栏，它是一个div，并且里面有链接，但是，每当我调整页面大小时，最后两个都会开始一个新行。 我希望链接保持水平，并在页面上添加滚动条。 例如，当您在Google上并且调整浏览器的大小时，溢出的内容不会开始新的一行。而是添加了滚动条。 我试过使用父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>标记，请在.topbar规则中添加white-space: nowrap 。

如果您希望.topbar的背景也总是在内容的后面填充，则还需要将width属性更改为min-width 。

这是一个没有min-width修正的示例 （对我来说， min-width大约为800px溢出）。

如评论中所述，为确保在内容比页面宽时页边距不会在父级之外溢出，请在.topbar规则中添加padding: 0.1px 。 这迫使子级边距保留在父级边距之内（而不是重叠），而不会过多影响展示。

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;
}

您可以看到一个有效的示例 。