你如何停止一個內容 <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;
}

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