0

我有一个小项目的问题。我有一个导航栏，它是一个 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>
4

4 回答 4

3

当内容太宽时，页面会自动水平滚动。如果您希望块中的许多元素保持太宽，那么您需要使它们的父级太宽（在这种情况下不适用）或停止父级包装内联元素（这是适用的）。要停止父级包装<a>标签，请添加white-space: nowrap到.topbar规则中。

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

这是一个没有修复的例子min-width（对我来说它溢出了大约 800px 宽）。

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

于 2012-05-20T18:20:05.937 回答
1

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

我希望它有所帮助。

于 2012-05-20T18:14:44.663 回答
1

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

而不是width: 100%;用您的菜单的像素数替换它，例如： width: 700px;

.topBar {
    background-color:rgb(161,35,35);
    position:relative;
    display:inline-block;
    width: 700px;
    text-align:center;
    height:40px;
}
于 2012-05-20T18:22:18.960 回答
0

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

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

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

于 2012-05-20T18:30:30.367 回答