css - 浏览器不会随着 div 宽度的增加而扩展

Question

我在一个 div 中有一个菜单控件。最初我将 div 宽度设置为 100% 并将最小宽度设置为 1200px 以使其与浏览器宽度相同。菜单中的元素数量可能会根据 future 的要求增加。我刚刚通过增加菜单中的元素来测试浏览器的行为，这里最后的元素正在下降。我在这里期望的是，当 div 宽度增加时，浏览器应该提供一个水平条，这样菜单中的所有元素将显示在一行中。

CSS 代码:

.maindiv{
position:relative；宽度:自动!重要；宽度:100%；最小宽度:1200px；

我的菜单结构是

<div class="maindiv" >
   <ul><li></li></ul>
</div>

Answer 1

您需要以下 CSS

.maindiv { 
    position: relative;
    width: 100%; 
    min-width: 1200px;
    overflow: auto;
    white-space: nowrap;
}

我假设您已经将列表项显示为内联或内联 block ...

.maindiv li {
    display: inline-block;
}

我最后的建议是你真的想要 min-width - 如果人们将浏览器的大小调整到低于这个值，那么他们将在浏览器窗口和 div 上看到一个水平滚动条如果他们的元素多于合适的。